需求:最近有个需求,需要导出一份报告文档,有封面页和内容页,封面页内容不多,需要作为pdf单独的一页,内容页的内容很丰富,一页展示不完,那就需要分页展示。
思路:我的实现方法是封面页作为一个元素,内容页作为一个元素,内容页通过pdf分页后和之前的封面页组合在一起,就成了一份完整的pdf报告。
实现:先是用到插件,下载后引用:
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
然后全局设置一个变量:
const pdf = new jsPDF('p', 'pt', 'a4');
然后改下导出pdf的方法:参数1是元素的id名,参数2是在函数最后确认要不要加一页空白pdf.
exportPage = async (node,adds) =>{
const element = document.getElementById(node); // 这个dom元素是要导出pdf的容器
const w = element.offsetWidth; // 获得该容器的宽
const h = element.offsetWidth; // 获得该容器的高
const {offsetTop} = element; // 获得该容器到文档顶部的距离
const {offsetLeft} = element; // 获得该容器到文档最左的距离
const canvas = document.createElement("canvas");
let abs = 0;
const winI = document.body.clientWidth; // 获得当前可视窗口的宽度(不包含滚动条)
const winO = window.innerWidth; // 获得当前窗口的宽度(包含滚动条)
if (winO > winI) {
abs = (winO - winI) / 2; // 获得滚动条长度的一半
}
canvas.width = w * 2; // 将画布宽&&高放大两倍
canvas.height = h * 2;
const context = canvas.getContext("2d");
context.scale(2, 2);
context.translate(-offsetLeft - abs, -offsetTop);
// 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此
// translate的时候,要把这个差值去掉
await html2canvas(element,{
allowTaint: true,
scale: 2 // 提升画面质量,但是会增加文件大小
}).then( (canvas) => {
const contentWidth = canvas.width;
const contentHeight = canvas.height;
// 一页pdf显示html页面生成的canvas高度;
const pageHeight = contentWidth / 592.28 * 841.89;
// 未生成pdf的html页面高度
let leftHeight = contentHeight;
// 页面偏移
let position = 0;
// a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
const imgWidth = 595.28;
const imgHeight = 592.28 / contentWidth * contentHeight;
const pageData = canvas.toDataURL('image/jpeg', 1.0);
// 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围,无需分页
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();
}
}
}
});
if(adds){
pdf.addPage(); // 不同元素之间的pdf合在一起需要先加个空白页
}
}
使用方法:
<div>
<Button
onClick={
()=>{
this.exportPage("pageOne",true).then(()=>{
this.exportPage("pageTow").then(()=>{
pdf.save(`报告.pdf`);
})
})
}}
>导出 </Button>
<div id="pageOne"> 111</div>
<div id="pageTow"> 222</div>
</div>
多个元素之间使用,需要分pdf页的先后顺序,所以存在一个回调地域,只有最里面的一层不需要加第二个参数,一层等一层去生成完整的pdf,然后去下载。