是什么

利用了jspdf和html2canvas兩個(gè)插件實(shí)現(xiàn)的，把標(biāo)簽內(nèi)的內(nèi)容轉(zhuǎn)成canvas再進(jìn)行打印出pdf的一項(xiàng)功能。

為什么

利用JS滿足某些打印pdf的場景

怎么做

最簡單demo

1. 安裝插件

npm i html2canvas -S
npm i jspdf -S

2. 加入工具函數(shù)（個(gè)人習(xí)慣放在項(xiàng)目的util目錄下）
   引入兩個(gè)插件，原理就是通過document.querySelector獲取當(dāng)前dom下的內(nèi)容轉(zhuǎn)換成canvas的內(nèi)容，再執(zhí)行打印成PDF的方法。判斷的語句是用于判斷當(dāng)前canvas的內(nèi)容是否超出一頁A4紙的高度，否則就自動往下分頁。

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
  getPdf: function(dom, title = 'download') {
    html2Canvas(document.querySelector(dom), {
      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 // A4紙寬度
      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')
    })
  }
}

未解決

• 分頁的內(nèi)容如何分配，防止切割當(dāng)前的頁面內(nèi)容
• canvas轉(zhuǎn)PDF的失真（模糊）