vue3+ts+JSPDF 实现pdf下载报告功能

1.安装jspdf npm install jspdf

2.引入  

import html2Canvas from "html2canvas";
import { showFullScreenLoading, tryHideFullScreenLoading } from "@/config/serviceLoading";
import JSPDF from "jspdf";

2.给要下载的元素区域添加id

3.写出下载的方法

// 导出
const generatePDF =async () => {
  ElMessage({
    message: "文件太大，正在下载请稍后",
    type: "warning"
  });
  showFullScreenLoading();
  setTimeout(() => {
    html2Canvas(document.querySelector("#pdfDom"), {
      useCORS: true,
      allowTaint: true
    }).then(canvas => {
      //内容的宽度
      let contentWidth = canvas.width;
      //内容高度
      let contentHeight = canvas.height;
      //一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];
      let pageHeight = (contentWidth / 592.28) * 841.89;
      //未生成pdf的html页面高度
      let leftHeight = contentHeight;
      //页面偏移
      let position = 20;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      let imgWidth = 555.28;
      let imgHeight = (575.28 / contentWidth) * contentHeight;
      //canvas转图片数据
      let pageData = canvas.toDataURL("image/jpeg", 1.0);

      // //新建JsPDF对象
      var PDF = new JSPDF("", "pt", "a4"); //生成pdf实例
      // //判断是否分页
      if (leftHeight < pageHeight) {
        PDF.addImage(pageData, "JPEG", 20, 20, imgWidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          PDF.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          if (leftHeight > 0) {
            PDF.addPage();
          }
        }
      }
      const timestamp = Date.now();
      PDF.save(`${timestamp}.pdf`);
      emits("closeModel");
      tryHideFullScreenLoading();
    });
  },800);
};

4.点击按钮调用下载pdf方法就可实现下载pdf