JS生成PDF文档

最新推荐文章于 2024-08-08 07:59:25 发布

是饭饭呐~

最新推荐文章于 2024-08-08 07:59:25 发布

阅读量1.1k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/fnafan/article/details/115551802

版权

通过html2canvas+jsPDF生成PDF文档（多页）

1、安装 html2canvas 库和 jsPDF

npm install html2canvas --save
npm install jspdf --save

2、导入页面

import html2canvas from 'html2canvas';
import { jsPDF } from "jspdf"

3、使用

html2canvas(document.getElementById("report")).then(canvas => {  // 获取需要截图的区域
     let contentWidth = canvas.width;
     let contentHeight = canvas.height;
     let pageHeight = contentWidth / 592.28 * 841.89;
     let leftHeight = contentHeight;
     let position = 0;
     let imgWidth = 595.28;
     let imgHeight = 592.28 / contentWidth * contentHeight;
     let pageData = canvas.toDataURL('image/jpeg', 1.0);
     let pdf = new jsPDF('', 'pt', 'a4')
     if (leftHeight < pageHeight) {
         pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
     } else {
        while (leftHeight > 0) {
             pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
             leftHeight -= pageHeight;
             position -= 841.89;
             // 避免添加空白页
             if (leftHeight > 0) {
                 pdf.addPage();
             }
         }
     }
     pdf.save('报表_' + new Date().getTime() + '.pdf');
 })