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 功能修改，原代码无法截屏外内容。