利用jspdf和html2canvas导出pdf文件

import JsPDF from 'jspdf';
import html2canvas from 'html2canvas';
//导出文件
exportPDF = () => {
  let { shop } = this.props;
  let element = document.getElementById('pdf');
  let { height } = getComputedStyle(element, false);
  let { width } = getComputedStyle(element, false);
  let canvas = document.createElement('canvas');
  canvas.width = parseInt(width, 10);
  canvas.height = parseInt(height, 10);
  let context = canvas.getContext('2d');
  context.scale(2, 2);
  html2canvas(element, {
    useCORS: true,
  }).then(canvas => {
    let pdf = new JsPDF('', 'pt', 'a4');
    context.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
    let pdfWidth = canvas.width;
    let pdfHeight = canvas.height;
    let pageHeight = pdfWidth / 592.28 * 841.89;
    let leftHeight = pdfHeight;
    let position = 0;
    let imgWidth = 595.28;
    let imgHeight = 592.28 / pdfWidth * pdfHeight;
    let pageData = canvas.toDataURL('image/jpeg', 1.0);
    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(`${shop.shopName}.pdf`);
  });
}复制代码

转载于:https://juejin.im/post/5d3c4b185188254cbc32b260