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