html2canvas+JsPDF完成将页面转换为pdf下载到本地

html2canvas+JsPDF

安装准备：

npm install html2canvas
npm install jspdf 

在需要时用的页面引入：

import html2canvas from "html2canvas";
import JsPDF from "jspdf";

具体使用方法：

exportPdf() {
      let shareContent = document.querySelector("#exportPdf"), //需要截图的包裹的（原生的）DOM 对象
        width = shareContent.offsetWidth, //获取dom 宽度
        height = shareContent.offsetHeight, //获取dom 高度
        canvas = document.createElement("canvas"), //创建一个canvas节点
        scale = 2; //定义任意放大倍数 支持小数(主要用于导出pdf模糊时使用)
      canvas.width = width * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale; //定义canvas高度 *缩放
      canvas.style.width = shareContent.offsetWidth * scale + "px";
      canvas.style.height = shareContent.offsetHeight * scale + "px";
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      let opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: true, //日志开关，便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,//dom 原始高度
        useCORS: true // 【重要】开启跨域配置，
      };

      //当x轴出现滚动条的时候;
      if (window.pageXOffset > 0) {
        opts.x = window.pageXOffset; //x轴的偏移量
        opts.windowWidth= shareContent.scrollWidth;//dom元素的实际宽度
      }
      //当y轴出现滚动条的时候;
      if (window.pageYOffset > 0) {
        opts.y = $("#exportPdf").offset().top;//dom元素距离顶部的高度
        opts.windowHeight= shareContent.scrollHeight;//dom元素的实际高度
      }
      html2canvas(shareContent, opts).then(canvas => {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = (contentWidth / 552.28) * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 20;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 555.28;
        var imgHeight = (552.28 / contentWidth) * contentHeight;
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var PDF = new JsPDF("", "pt", "a4");//设置pdf格式，默认为竖列展示
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, "JPEG", 20, 30, imgWidth, imgHeight);
        } else {
        //多页pdf设置
          while (leftHeight > 0) {
            PDF.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save("导出的文件的名字.pdf"); // 这里是导出的文件名
      });
    },