前端（vue）匯出pdf

純前端匯出 pdf 實現方法如下：

1. 安裝 html2pdf、jspdf

npm install html2canvas jspdf --save

2. 專案 utils 資料夾中新建一個 html2pdf.js（檔名稱自擬）檔案，內容如下：

import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

/*
* 使用說明
* ele:需要匯出pdf的容器元素(dom節點 不是id)
* pdfFileName: 匯出檔案的名字 透過呼叫outPutPdfFn方法也可傳引數改變
* splitClassName: 避免分段截斷的類名 當pdf有多頁時需要傳入此引數 , 避免pdf分頁時截斷元素  如表格<tr class="itemClass"></tr>
* 呼叫方式 先 let pdf = new PdfLoader(ele, 'pdf' ,'itemClass');
* 若想改變pdf名稱 pdf.outPutPdfFn(fileName);  outPutPdfFn方法返回一個promise 可以使用then方法處理pdf生成後的邏輯
* */
class PdfLoader {
  constructor(ele, pdfFileName, splitClassName) {
    this.ele = ele
    this.pdfFileName = pdfFileName
    this.splitClassName = splitClassName
    this.A4_WIDTH = 595
    this.A4_HEIGHT = 842
  }

  async getPDF(resolve) {
    const ele = this.ele
    const pdfFileName = this.pdfFileName
    const eleW = ele.offsetWidth// 獲得該容器的寬
    const eleH = ele.scrollHeight// 獲得該容器的高
    const eleOffsetTop = ele.offsetTop// 獲得該容器到文件頂部的距離
    const eleOffsetLeft = ele.offsetLeft// 獲得該容器到文件最左的距離
    const canvas = document.createElement('canvas')
    let abs = 0
    const win_in = document.documentElement.clientWidth || document.body.clientWidth// 獲得當前可視視窗的寬度（不包含捲軸）
    const win_out = window.innerWidth// 獲得當前視窗的寬度（包含捲軸）
    if (win_out > win_in) {
      abs = (win_out - win_in) / 2// 獲得捲軸寬度的一半
    }
    canvas.width = eleW * 2// 將畫布寬&&高放大兩倍
    canvas.height = eleH * 2
    const context = canvas.getContext('2d')
    context.scale(2, 2) // 增強圖片清晰度
    context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
    html2canvas(ele, {
      useCORS: true// 允許canvas畫布內可以跨域請求外部連結圖片, 允許跨域請求。
    }).then(async canvas => {
      const contentWidth = canvas.width
      const contentHeight = canvas.height
      // 一頁pdf顯示html頁面生成的canvas高度;
      const pageHeight = (contentWidth / this.A4_WIDTH) * this.A4_HEIGHT // 這樣寫的目的在於保持寬高比例一致 pageHeight/canvas.width = a4紙高度/a4紙寬度// 寬度和canvas.width保持一致
      // 未生成pdf的html頁面高度
      let leftHeight = contentHeight
      // 頁面偏移
      let position = 0
      // a4紙的尺寸[595,842],單位畫素，html頁面生成的canvas在pdf中圖片的寬高
      const imgWidth = this.A4_WIDTH - 10 // -10為了頁面有右邊距
      const imgHeight = (this.A4_WIDTH / contentWidth) * contentHeight
      const pageData = canvas.toDataURL('image/jpeg', 1.0)
      const pdf = jsPDF('', 'pt', 'a4')
      // 有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
      // 當內容未超過pdf一頁顯示的範圍，無需分頁
      if (leftHeight < pageHeight) {
        // 在pdf.addImage(pageData, 'JPEG', 左，上，寬度，高度)設定在pdf中顯示；
        pdf.addImage(pageData, 'JPEG', 5, 0, imgWidth, imgHeight)
        // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
      } else {
        // 分頁
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', 5, position, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= this.A4_HEIGHT
          // 避免新增空白頁
          if (leftHeight > 0) {
            pdf.addPage()
          }
        }
      }
      pdf.save(pdfFileName + '.pdf', { returnPromise: true }).then(() => {
        // 去除新增的空div 防止頁面混亂
        const doms = document.querySelectorAll('.emptyDiv')
        for (let i = 0; i < doms.length; i++) {
          doms[i].remove()
        }
      })
      this.ele.style.height = ''
      resolve()
    })
  }
	//此方法是防止（圖表之類）內容因為A4紙張問題被截斷
  async outPutPdfFn(pdfFileName) {
    return new Promise((resolve, reject) => {
      this.ele.style.height = 'initial'
      pdfFileName ? this.pdfFileName = pdfFileName : null
      const target = this.ele
      const pageHeight = target.scrollWidth / this.A4_WIDTH * this.A4_HEIGHT
      // 獲取分割dom，此處為class類名為item的dom
      const domList = document.getElementsByClassName(this.splitClassName)
      // 進行分割操作，當dom內容已超出a4的高度，則將該dom前插入一個空dom，把他擠下去，分割
      let pageNum = 1 // pdf頁數
      const eleBounding = this.ele.getBoundingClientRect()
      for (let i = 0; i < domList.length; i++) {
        const node = domList[i]
        const bound = node.getBoundingClientRect()
        const offset2Ele = bound.top - eleBounding.top
        const currentPage = Math.ceil((bound.bottom - eleBounding.top) / pageHeight) // 當前元素應該在哪一頁
        if (pageNum < currentPage) {
          pageNum++
          const divParent = domList[i].parentNode // 獲取該div的父節點
          const newNode = document.createElement('div')
          newNode.className = 'emptyDiv'
          newNode.style.background = 'white'
          newNode.style.height = (pageHeight * (pageNum - 1) - offset2Ele + 30) + 'px' // +30為了在換下一頁時有頂部的邊距
          newNode.style.width = '100%'
          divParent.insertBefore(newNode, node) //在每一個節點前面插入一個空的新節點，防止內容被分割截斷
        }
      }
      // 非同步函式，匯出成功後處理互動
      this.getPDF(resolve, reject)
    })
  }
}

export default PdfLoader

3. 在需要使用匯出pdf 頁面引入

import PdfLoader from '@/utils/html2pdf   // 引入pdf外掛
mounted() {
  const xxx = document.getElementById('questionnaire')  // 需要匯出部分頁面的id名
  this.pdfDownLoader = new PdfLoader(xxx, 'fileName', 'question-table')  // fileName -->匯出檔名,  question-table -->防止被截斷的class名
},
methods: {
	 // 匯出pdf 
    handleExport() {
      this.pdfDownLoader.outPutPdfFn('問卷分析')
    }
}

匯出效果如下：