vue中使用html2canvas和jspdf将html页面生成pdf文件并下载

将html页面生成pdf文件，需首先将页面转换为图片，然后再输出成pdf。
因此，需要用到 html2canvas 插件和 jspdf 这两个插件。

1、引入 html2canvas 和 jspdf

npm install html2canvas

npm install jspdf --save

2、项目内引入

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

3、生成方法

createPdf () {
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;

      html2canvas(this.$refs.imgDom, {
        allowTaint: true,
        scale: 2,
        dpi: 182,//导出图片清晰度
      }).then(function (canvas) {
         let contentWidth = canvas.width
        let contentHeight = canvas.height
        //一页pdf显示html页面生成的canvas高度;
        let pageHeight = contentWidth / 592.28 * 841.89
        //未生成pdf的html页面高度
        let leftHeight = contentHeight
        //页面偏移
        let position = 0
        let imgWidth = 595.28
        let imgHeight = 592.28 / contentWidth * contentHeight
        //返回图片dataURL，参数：图片格式和清晰度(0-1)
        let pageData = canvas.toDataURL('image/jpeg', 1.0)
        //方向默认竖直，尺寸ponits，格式 a4纸 [595.28,841.89]
        let PDF = new JsPDF('', 'pt', 'a4')
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          //addImage将图片添加到pdf中
          //addImage中间两个参数控制x、y边距，
          //后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
          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) {
              //addPage()添加pdf页数
              PDF.addPage()
            }
          }
        }
        //保存名称
        PDF.save('计算结果.pdf')
       } )
    }