vue 将指定div区域，转为pdf下载

下载依赖 npm install html2canvas jspdf --save

使用的页面引入

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

方法区定义方法，转化下载

htmlToPdf(row) {
  html2Canvas(document.querySelector('#demo'), {
    allowTaint: true,
  }).then(function (canvas) {
    let contentWidth = canvas.width; // 获得该容器的宽
    let contentHeight = canvas.height; // 获得该容器的高
    let pageHeight = (contentWidth / 592.28) * 841.89;
    let leftHeight = contentHeight;
    let position = 0;
    let imgWidth = 595.28;
    let imgHeight = (592.28 / contentWidth) * contentHeight;
    let pageData = canvas.toDataURL('image/jpeg', 1.0);
    let PDF = new JsPDF('', '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(row.title + '.pdf');
  });
},

使用（最好添加一定的padding值，防止生成的pdf文件效果不好）

  <div id="demo" style="padding:10px 30px">
  </div>