前端实现 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;
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值