vue导出页面为PDF文件

一、安装依赖

1、npm install --save html2canvas   //将页面html转换成图片

2、npm install jspdf --save   //图片生成pdf

二、定义全局函数

创建一个htmlToPdf.js文件在指定位置 => 我个人习惯放在(src/utils/htmlToPdf)

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default{

  install (Vue, options) {

    Vue.prototype.getPdf = function () {

      var title = this.htmlTitle

      html2Canvas(document.querySelector('#pdfDom'), {

        allowTaint: true

      }).then( (canvas) => {

        let contentWidth = canvas.width

        let contentHeight = canvas.height

        let pageHeight = contentWidth / 592.28 * 841.89

        let leftHeight = contentHeight

        let position = 0

        let imgWidth = 595.28

        let imgHeight = 592.28 / contentWidth * contentHeight

        let pageData = canvas.toDataURL('image/jpeg', 1.0)

        let PDF = new JsPDF('', 'pt', 'a4')

        if (leftHeight < pageHeight) {

          PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)

        } else {

          while (leftHeight > 0) {

            PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)

            leftHeight -= pageHeight

            position -= 841.89

            if (leftHeight > 0) {

              PDF.addPage()

            }

          }

        }

        PDF.save(title + '.pdf')

      }

      )

    }

  }

}

三、在main.js中使用我们定义的函数

import htmlToPdf from '@/utils/htmlToPdf'

Vue.use(htmlToPdf)

四、在需要的导出的页面，调用我们的getPdf方法

1、HTML：

//给自己需要导出的组件部分，定义id为"pdfDom"，此部分将就是pdf显示的部分

导出PDF

2、JS：

export default {

   data () {

      return {

         htmlTitle: '页面导出PDF文件名'

      }

   }

}