前端界面生成PDF并导出下载

计算机软件开发 · 2024-10-7 09:42:20

最近，公司背景管理体系有个项目需求，将前端界说好的界面导出PDF文档。我查阅很多文档，发现可以利用html2canvas、jspdf来完成。也可以通过jspdf来绘画PDF文档

思绪：通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件

1、安装

npm install html2canvas --save npm install jspdf --save2、html2Canvas

文档：http://html2canvas.hertzen.com/configuration

此中，文档中还缺少dpi，dpi就是像素的意思，dpi的值越大，证实图片约清晰，我这里选择的是300

注意事项：界面隐藏、透明度为0都不可以大概截图乐成

3、jspdf

文档：https://www.freesion.com/article/97121153598/
https://parall.ax/products/jspdf
https://www.hangge.com/blog/cache/detail_2205.html

每个文档先容的不是很全面，所以，须要几个文档对比观看下
4、代码展示

import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export const getPdf = (title) =>{ return new Promise(resolve => { html2Canvas(document.querySelector('#resultsHuiZongTableId'), { allowTaint: false, useCORS: true, // allowTaint、useCORS只可以大概出现一个 imageTimeout: 0, dpi: 300, // 像素 scale: 4, // 图片巨细 }).then(function (canvas) { // document.body.appendChild(canvas) // 用于将canvas对象转换为base64位编码 let pageData = canvas.toDataURL('image/jpeg', 1.0), canvasWidth = canvas.width, canvasHeight = canvas.height, concentWidth = 500, concentHeight = Math.round((concentWidth / canvasWidth) * canvasHeight), position = 72, pageHeight = 892, height = concentHeight console.log(height, pageHeight) // 新建一个new JsPDF，A3的像素巨细 842*1191，A4的像素巨细 592*841。这个px像素禁绝确，不清晰他们的像素巨细泉源怎样 let PDF = new JsPDF('p', 'px', 'a3') if (height <= pageHeight) { // 添加图片 PDF.addImage(pageData, 'JPEG', 68, position, concentWidth, concentHeight) } else { while (height > 0) { PDF.addImage(pageData, 'JPEG', 68, position, concentWidth, concentHeight) height -= pageHeight position -= pageHeight if (height > 0) { PDF.addPage() } } } // 生存 pdf 文档 PDF.save(`${title}.pdf`) resolve(true) }) })}<div

隐藏了部门敏感信息

接待各人点赞、收藏，品评一起讨论

前端界面生成PDF并导出下载

浏览过的版块

所属分类: 问答交流

新帖推荐: 30日

推荐作品