前端实现 pdf下载

import React from 'react';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import { message } from 'antd';
import process from 'process/browser.js';

const captureElement = async (element) => {
    return await html2canvas(element, {
      onclone: (doc) => {
        doc.getElementById('pc-render-footer').style.display = 'none';
      },
      useCORS: true,
      logging: false
    });
  };
  
  const addCanvasPageToPDF = (pdf, canvas, a4w, a4h, imgHeight, renderedHeight) => {
    const pageCanvas = document.createElement("canvas");
    pageCanvas.width = canvas.width;
    pageCanvas.height = Math.min(imgHeight, canvas.height - renderedHeight);
    const pageCtx = pageCanvas.getContext("2d");
    pageCtx.putImageData(
      canvas.getContext("2d").getImageData(0, renderedHeight, canvas.width, pageCanvas.height),
      0, 0
    );
    pdf.addImage(
      pageCanvas.toDataURL("image/jpeg", 1.0),
      "JPEG",
      10, 10,
      a4w,
      Math.min(a4h, a4w * pageCanvas.height / pageCanvas.width)
    );
  };
  
  const savePDF = async (element, processDefinitionName) => {
    const canvas = await captureElement(element);
    const pdf = new jsPDF("p", "mm", "a4");
    const a4w = 190;
    const a4h = 257;
    const imgHeight = Math.floor(a4h * canvas.width / a4w);
    let renderedHeight = 0;
  
    while (renderedHeight < canvas.height) {
      addCanvasPageToPDF(pdf, canvas, a4w, a4h, imgHeight, renderedHeight);
      renderedHeight += imgHeight;
      if (renderedHeight < canvas.height) {
        pdf.addPage();
      }
    }
  
    pdf.save(`${processDefinitionName}.pdf`);
  };
  
  export const canvasPdf = savePDF;