JsPDF和html2canvas导出pdf文件

利用插件，转图片，然后到转化为pdf文件!

new JsPDF('l', 'pt', 'a4');三个接收三个参数，第一个控制文件是横向还是竖向，该代码是横向导出pdf

// 导出页面为PDF格式 引入导出pdf相关文件
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'


// 调用导出函数
export const exportPdf = (pdfName, refName = '#exportPdf')=> {
  // this.$message.success('正在为您拉取页面资源，请稍等！！！！')
  html2Canvas(document.querySelector(refName), {
    proxy: 'http://file.sunywonders.com/',
    useCORS: true,
    logging: true,
    allowTaint: true,
    imageTimeout: 15000,
    dpi: window.devicePixelRatio * 4,
    scale: 2,
  }).then(function (canvas) {
    //获取canvas画布的宽高
    var contentWidth = canvas.width / 2;
    var contentHeight = canvas.height / 2;
    //一页pdf显示html页面生成的canvas高度;
    var pageHeight = contentWidth /841.89  * 592.28;
    //未生成pdf的html页面高度
    var leftHeight = contentHeight;
    //页面偏移
    var position = 0;
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    var imgWidth = 841.89;
    var imgHeight = 841.89/contentWidth * contentHeight;
    var pageData = canvas.toDataURL();
    var PDF = new JsPDF('l', 'pt', 'a4');
    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    //当内容未超过pdf一页显示的范围，无需分页
    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 -= 592.28;
        //避免添加空白页
        if(leftHeight > 0) {
          PDF.addPage();
        }
      }
    }
    PDF.save(pdfName + '.pdf')
  })
}

增加了自动分页，如遇内容截断问题，本人解决方法是，利用css+html来增加距离，防止截断，如果有更好的方法，欢迎私信一起沟通讨论。