vue項目html頁面生成PDF（附帶分頁被截斷 ，圖片顯示不全的問題）

1、下載 html2canvas和jspdf  兩個插件

npm install html2canvas jspdf --save

2、創建pdf.js, 代碼如下

// 導出頁面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export const getPdf = (id, title) => {
  // 特別重要：當頁面超過一頁，出現滾動條，滾動的部分生成的圖片為空白
  window.pageYoffset = 0
  document.documentElement.scrollTop = 0
  document.body.scrollTop = 0

  let url = html2Canvas(document.querySelector(id)).then(function (canvas) {
    var contentWidth = canvas.width
    var contentHeight = canvas.height

    // 一頁pdf顯示html頁面生成的canvas高度;
    var pageHeight = contentWidth / 592.28 * 841.89
    // 未生成pdf的html頁面高度
    var leftHeight = contentHeight
    // 頁面偏移
    var position = 0
    // a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
    var imgWidth = 595.28
    var imgHeight = 592.28 / contentWidth * contentHeight

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

    var pdf = new JsPDF('', 'pt', 'a4')

    // 有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
    // 當內容未超過pdf一頁顯示的范圍，無需分頁
    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
    pdf.save(title + '.pdf')
    // 輸出base64字符串
    return pdf.output('datauristring')
  }
  )
  return url
}