html2Canvas + JsPDF实现纯前端pdf导出

import html2Canvas from 'html2canvas';

import JsPDF from 'jspdf';

import { PDFDocument, PDFName, PDFDictionary } from 'pdf-lib';

export function generatePDF(name, id) {

  // 生成 PDF 的函数，接受名称和元素的 ID 作为参数

  let title = name || 'index';



  // setTimeout(function () {

    html2Canvas(document.querySelector(`#${id}`), {

      allowTaint: true,

      useCORS: true,

      backgroundColor: "transparent",

      taintTest: false,

      foreignObjectRenderer: {

        applyForeignObject: false,

        preserveObjectStacking: true,

      },

    }).then(function (canvas) {

      // 使用 html2Canvas 将指定元素截图并生成画布对象，然后执行回调函数



      let contentWidth = canvas.width;

      // 画布的宽度



      let contentHeight = canvas.height;

      // 画布的高度



      let pageHeight = (contentWidth / 592) * 550;

      // 页面的高度，根据 A4 纸的比例计算



      let leftHeight = contentHeight * 884.459545 / 1510;

      // 剩余的高度，初始值为画布的高度



      let position = 0;

      // 当前页面的位置，初始值为 0



      let imgWidth = 592;

      // 图片的宽度，与 A4 纸的宽度相同



      let imgHeight = 550 / contentWidth * contentHeight;

      // 图片的高度，根据画布的宽高比例计算



      let pageData = canvas.toDataURL('image/jpeg');

      // 将画布转换为 JPEG 格式的图片数据

     

      let PDF = new JsPDF('portrait', 'pt',);

      // 创建一个新的 JsPDF 对象，用于生成 PDF



      PDF.addFont('/simsunb.ttf', 'SimHei', 'normal');

      // 加载中文字体



      PDF.setFont('SimHei');

      // 设置使用中文字体



      if (leftHeight < pageHeight) {

        // 如果剩余的高度小于页面的高度，则直接将画布添加到 PDF 中

        PDF.addImage(pageData, 'JPEG', PDF.internal.pageSize.getWidth() - imgWidth, position, imgWidth, imgHeight);





      } else {

        // let decreaseHeight = 10;

        // 否则，需要分页处理

        while (leftHeight > 0) {

          // 当还有剩余高度时，循环添加页面

          PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);



          // 将画布添加到 PDF 中

          leftHeight -= pageHeight;

          // 减去当前页面的高度

          // leftHeight -= decreaseHeight;

          position -= pageHeight;

          // position -= decreaseHeight;





          // 更新页面位置为下一页的起始位置

          if (leftHeight > 0) {

            PDF.addPage();

            // 如果还有剩余高度，则添加新页面

          }

        }

      }



      PDF.save(title + '.pdf');

    });

  // }, 1000); // 1秒的延迟时间

}