是什么

利用了jspdf和html2canvas两个插件实现的，把标签内的内容转成canvas再进行打印出pdf的一项功能。

为什么

利用JS满足某些打印pdf的场景

怎么做

最简单demo

1. 安装插件

npm i html2canvas -S
npm i jspdf -S

2. 加入工具函数（个人习惯放在项目的util目录下）
   引入两个插件，原理就是通过document.querySelector获取当前dom下的内容转换成canvas的内容，再执行打印成PDF的方法。判断的语句是用于判断当前canvas的内容是否超出一页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')
    })
  }
}

未解决

• 分页的内容如何分配，防止切割当前的页面内容
• canvas转PDF的失真（模糊）