react-html2canvas-jspdf 自动分页导出pdf

标签：jspdf react canvas renderedHeight height html2canvas width pdf page

// 新建exportPDF.js文件

import html2canvas from 'html2canvas'; import jsPDF from 'jspdf';
function generatePDF(id, title) {   //下载pdf方法   let demo = document.getElementById(id);   demo.style.overflow = 'visible';   html2canvas(demo, {     allowTaint: true, //允许跨域     height: document.getElementById(id).scrollHeight, //     width: document.getElementById(id).scrollWidth, //为了使横向滚动条的内容全部展示，这里必须指定     background: "#FFFFFF", //如果指定的div没有设置背景色会默认成黑色     // dpi: 300,     scale: 1.5,     useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。   }).then((canvas) => {     console.log(canvas, 'canvas')     let pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向     let ctx = canvas.getContext('2d'),       a4w = 190,       a4h = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277       imgHeight = Math.floor(a4h * canvas.width / a4w), //按A4显示比例换算一页图像的像素高度       renderedHeight = 0;
    while (renderedHeight < canvas.height) {       let page = document.createElement("canvas");       page.width = canvas.width;       page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页       //用getImageData剪裁指定区域，并画到前面创建的canvas对象中       page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(         imgHeight, canvas.height - renderedHeight)), 0, 0);       pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height /         page.width)); //添加图像到页面，保留10mm边距       renderedHeight += imgHeight;       if (renderedHeight < canvas.height) pdf.addPage(); //如果后面还有内容，添加一个空页     }     pdf.save(title + '.pdf');   })   demo.style.overflow = 'auto'; }
export { generatePDF };

// 新建index.jsx文件，引用generatePDF

import { generatePDF } from "@/utils/exportPDF";   return ( 　　<div> 　　　　<Button 　　　　　　onClick={() => { 　　　　　　　　generatePDF("contentPage", "导出pdf文件的名字"); 　　　　　　}} 　　　　>导出PDF</Button> 　　　　<div style={{ height: '100vh' }} id="contentPage"> 　　　　　　// 页面内容 　　　　</div> 　　</div> )

 

标签：jspdf,react,canvas,renderedHeight,height,html2canvas,width,pdf,page
From： https://www.cnblogs.com/lou-0820/p/17390001.html