一、添加模塊

npm install --save html2canvas（將頁(yè)面html轉(zhuǎn)化成圖片）
npm install jspdf --save（將圖片轉(zhuǎn)換成pdf）

二、定義全局函數(shù)..創(chuàng)建一個(gè)htmlToPdf.js文件在指定位置.我個(gè)人習(xí)慣放在('src/utils/htmlToPdf')

// 導(dǎo)出頁(yè)面為PDF格式

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(function (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中使用我們定義的函數(shù)文件

import htmlToPdf from '@/components/utils/htmlToPdf'

Vue.use(htmlToPdf)

四、在需要的導(dǎo)出的頁(yè)面..調(diào)用我們的getPdf方法即可.
<el-button @click="getPdf">導(dǎo)出PDF文件</el-button>