前端利用html2canvas+jspdf实现html转pdf

公司业务的月报页面，要实现pdf下载，查了资料，大概有个方向，就是利用html2canvas把html转为图片，然后再生成pdf格式的文件实现了下载。
核心代码

import html2canvas from 'html2canvas';
import JSPDF from 'jspdf';
export default {
  install(Vue, options) {
    Vue.prototype.ExportSavePdf = function(htmlTitle, currentTime) {
      document.documentElement.scrollTop = 0;
      let element = document.getElementById('pdfCentent');
      html2canvas(element, {
        logging: false,
        scale: 2
      }).then(function(canvas) {
        // let pdf = new JSPDF('p', 'mm', 'a4'); // A4纸，纵向
        // let ctx = canvas.getContext('2d');
        // let a4w = 170;
        // let a4h = 257; // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
        // let imgHeight = Math.floor((a4h * canvas.width) / a4w); // 按A4显示比例换算一页图像的像素高度
        // let renderedHeight = 0;

        // while (renderedHeight < canvas.height) {
        //   let page = document.createElement('canvas');
        //   page.width = canvas.width;
        //   page.height = Math.min(imgHeight, canvas.height - renderedHeight); // 可能内容不足一页

        //   // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        //   page
        //     .getContext('2d')
        //     .putImageData(
        //       ctx.getImageData(
        //         0,
        //         renderedHeight,
        //         canvas.width,
        //         Math.min(imgHeight, canvas.height - renderedHeight)
        //       ),
        //       0,
        //       0
        //     );
        //   pdf.addImage(
        //     page.toDataURL('image/jpeg', 1.0),
        //     'JPEG',
        //     10,
        //     10,
        //     a4w,
        //     Math.min(a4h, (a4w * page.height) / page.width)
        //   ); // 添加图像到页面，保留10mm边距

        //   renderedHeight += imgHeight;
        //   if (renderedHeight < canvas.height) {
        //     pdf.addPage();
        //   } // 如果后面还有内容，添加一个空页
        //   // delete page;
        // }
        // pdf.save(htmlTitle);

        // 整页 2
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;

        // 将canvas转为base64图片
        let pageData = canvas.toDataURL('image/jpeg', 1.0);

        // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
        // 2为上面的scale 缩放了2倍
        let pdfX = ((contentWidth + 10) / 2) * 0.75;
        let pdfY = ((contentHeight + 100) / 2) * 0.75; // 500为底部留白

        // 设置内容图片的尺寸，img是pt单位
        let imgX = pdfX;
        let imgY = (contentHeight / 2) * 0.75; //内容图片这里不需要留白的距离

        // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
        let PDF = new JSPDF('', 'pt', [pdfX, pdfY]);

        // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
        PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY);
        PDF.save(htmlTitle);
      });
    };
  }
};

其中

document.documentElement.scrollTop = 0

解决了当页面滚动到底部的时候，下载pdf，前面页有大量空白的问题

在调用new JSPDF的时候，第三个参数为控制生成出来的PDF的宽高，如果要用A4大小的PDF，可以传a4，但是会存在分页截断的问题，代码中有两种方案分页和不分页的。