HTML转PDF

前言

近期有个需求：需要把一个数据分析页面导出为PDF文件，经过一番调研，借鉴的前端的方案是：html2canvas （使用JavaScript屏幕截图） + jspdf （用JavaScript生成pdf的库）。
优点：整个过程在前端进行，不需要服务器参与，调用简单
缺点：生成的pdf为图片形式的，且内容失真
待攻克的问题：多页时页面边界处的图表被截断

实现步骤

安装依赖

npm install html2canvas jspdf

demo源码

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

printPDF = () => {
    const domElement = document.getElementById('PUDetails_RightPart')
    html2canvas(domElement).then(canvas => {
      const contentWidth = canvas.width
      const contentHeight = canvas.height

      // 一页pdf显示html页面生成的canvas高度;
      const pageHeight = (contentWidth / 592.28) * 841.89
      // 未生成pdf的html页面高度
      let leftHeight = contentHeight
      // 页面偏移
      let position = 0
      // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      const imgWidth = 555.28
      const imgHeight = (552.28 / contentWidth) * contentHeight

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

      const pdf = new jsPDF('', 'px', 'a4')

      // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      // 当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight)
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= 841.89
          // 避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage()
          }
        }
      }

      pdf.save('content.pdf')
    })
  }

参考链接

1.html转pdf
2.把HTML转成PDF的4个方案及实现方法
3.Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF）