PDF 保存

原理 html转canvas再转pdf

以下是React中使用，改成VUE使用原理也差不多

该方案胜在省事，但是因为是转图片存，所以分页处可能会有点问题

第三方库

yarn add html2canvas jspdf

代码

直接调用handlePDF方法即可下载。

import html2Canvas from "html2canvas";
import * as jsPDF from "jspdf";

 
handlePDF = () => {
   // 获取需要打印的Dom节点
  const pdfDom = document.getElementsByClassName("pdf")[0];
  html2Canvas(pdfDom, {
    windowWidth: pdfDom.scrollWidth,
    windowHeight: pdfDom.scrollHeight + 200,
    height: pdfDom.scrollHeight + 200,
    // 截屏起止位置 scrollX、scrollY
    scrollY: 0,
    // 放大两倍，防止模糊
    scale: 2
  }).then(canvas => {
    var contentWidth = canvas.width;
    var contentHeight = canvas.height;
    var pageHeight = (contentWidth / 592.28) * 841.89;
    var leftHeight = contentHeight;
    //页面偏移
    var position = 0;
    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    var imgWidth = 595.28;
    var imgHeight = (595.28 / contentWidth) * contentHeight;

    var pageData = canvas.toDataURL("image/jpeg", 1.0);
    var pdf = new jsPDF("", "pt", "a4");

    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    //当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, "JPEG", 20, 40, imgWidth, imgHeight);
    } else {
      while (leftHeight > 0) {
        pdf.addImage(pageData, "JPEG", 20, position + 40, imgWidth, imgHeight);
        leftHeight -= pageHeight;
        position -= 841.89;
        //避免添加空白页
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    pdf.save(`方案配置.pdf`);
  });
};

代码基于html2Canvas + jspdf 实现下载pdf功能修改，原代码无法截屏外内容。