利用 html2canvas+jsPDF 把 HTML元素 转化为PDF文件，以及遇到的坑

一、需求来源：把可视化展示HTML页面打印成PDF文件报表

 

二、html2canvas+jsPDF导出pdf原理：通过html2canvas将遍历页面元素，并渲染生成canvas，然后将canvas图片格式添加到jsPDF实例，生成pdf。

 

三、代码

var title = 'RFM'
this.overflow = 'visible';
let self = this;
let targetDom = document.querySelector('#pdfDom'); // 获取打印的元素
this.$nextTick(()=>{  // 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
  html2Canvas(targetDom, {
    allowTaint: true,
    height: targetDom.scrollHeight
  }).then(function (canvas) {   // 通过promise返回canvas元素
    let contentWidth = canvas.width
    let contentHeight = canvas.height
    let pageHeight = contentWidth / 592.28 * 841.89  // 每页高度：a4纸的尺寸
    let leftHeight = contentHeight
    let position = 0
    let imgWidth = 590.28  // 图片宽度
    let imgHeight = 592.28 / contentWidth * contentHeight
    let pageData = canvas.toDataURL('image/jpeg', 1.0) // 保存canvas图像
      // 参数：方向（l：横向，p：纵向）| 测量单位（"pt"，"mm", "cm", "m", "in" or "px"）| 格式（默认a4，也可通过大小数组[595.28, 841.89]）
    let PDF = new JsPDF('p', 'pt', 'a4')
    // 按照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') // 保存pdf文档，本地下载pdf文件
  })
})
this.timeout = setTimeout(() => {
  self.overflow = 'auto';
}, 1000);

 pageHeight计算公式：

 

四、遇到的坑

1、打印元素中overflow属性值不能为auto

　　解决方案为在打印前把overflow值设置为visible，打印完之后重新设置为auto。

注意：

　　（1）把auto修改成visible，要考虑页面渲染时间，所以要用 nextTick 等页面渲染完再执行操作

　　（2）把visible再修改成auto要考虑到打印时间，所以要用到 settimeout 延迟执行

2、要设置height高度为打印元素的 滚动高度 scrollHeight ，若元素没有滚动条，scrollHeight 值 = 元素真实高度 （测试是如此的）

 

拓展：

原生js使DIV滚动到最底部 ： ele.scrollTop = ele.scrollHeight