admin管理员组文章数量:1649151
页面截图导出为PDF,以及PDF强行截断分页问题的处理
需求
将页面内容截图导出为PDF文件,如果有高度过高的表格或图片,尽量不截断而是放在下一页展示。
思路
1.将需要导出的dom,都用一个特殊的类名标注起来,然后用html2Canvas将这些dom一一截图。
(这里并非将整个页面截图,而是多个dom截图再拼接,是为了判断是否截断问题。)
2.之后将得到的图片用JsPDF从上到下依次添加到一个pdf文件中即可。
3.关于截断分页的问题,需要对每一张图片和当前页面剩余高度进行比较,可以分为一下几种情况。
(1)图片高度小于当前页面剩余高度=>正常添加该图片到pdf
(2)图片高度大于当前页剩余高度,而且图片高度小于一个空白页的高度=>翻页,将图片放在最新的一页
(3)图片高度大于空白页高度=>这种情况即便是翻页也无法避免截断,所以正常添加该图片到pdf即可
实现
import html2Canvas from 'html2canvas';
import JsPDF from '../../public/js/jspdf.debug';
/**
* [获取页面导出的pdf文件]
* @param {[Object]} options [导出pdf配置项,包括一个title属性设置文件名,以及query属性设置获取元素的条件]
*/
function getPdf(options) {
var title = options.title || '标题';// 导出文件名,默认为“标题”
const children = document.getElementsByClassName(options.className || 'pdf-cell');
let canvas = [];
let i = 0;
function toCanvas() {
if (children.length > 1) {
html2Canvas(children[i], {
dpi: 500, // 导出pdf清晰度
background: '#fff', // 背景设为白色(默认为黑色)
}).then(res => { // 计算每个dom的高度,方便后面计算分页
res.imgWidth = 595.28;
res.imgHeight = 592.28 / res.width * res.height;
canvas.push(res);
i++;
if (canvas.length === children.length) {
paging();
toPdf();
} else {
toCanvas();
}
});
}
}
/**
* [根据dom的高度初步进行分页,会将canvas组装为一个二维数组]
*/
function paging() {
const imgArr = [[]];
let pageH = 0;// 页面的高度
let allH = 0;// 当前组所有dom的高度和
let j = 0;
for (let k = 0; k < canvas.length; k++) { // 涉及到k--的操作,使用for循环方便
pageH += canvas[k].imgHeight;
if (pageH > 841.89 && canvas[k].imgHeight < 841.89) { // 当某个页面装不下下一个dom时,则分页
imgArr[j][0].allH = allH - canvas[k].imgHeight;
allH = pageH = 0;
k--;
j++;
imgArr.push([]);
} else {
if (canvas[k].imgHeight > 841.89) { // 特殊情况:某个dom高度大于了页面高度,特殊处理
canvas[k].topH = 841.89 - (pageH - canvas[k].imgHeight);// 该dom顶部距离页面上方的距离
pageH = (2 * canvas[k].imgHeight - pageH) % 841.89;
canvas[k].pageH = pageH;// 该dom底部距离页面上方的距离
}
imgArr[j].push(canvas[k]);
allH += canvas[k].imgHeight;
}
if (k === canvas.length - 1) imgArr[j][0].allH = allH;
}
canvas = imgArr;
}
/**
* [生成PDF文件]
*/
function toPdf() {
const PDF = new JsPDF('', 'pt', 'a4');
canvas.forEach((page, index) => {
let allH = page[0].allH;
let position = 0;// pdf页面偏移
if (index !== 0 && allH <= 841.89) PDF.addPage();
page.forEach(img => {
if (img.imgHeight < 841.89) { // 当某个dom高度小于页面宽度,直接添加图片
PDF.addImage(img.toDataURL('image/jpeg', 1.0), 'JPEG', 0, position, img.imgWidth, img.imgHeight);
position += img.imgHeight;
allH -= img.imgHeight;
} else { // 当某个dom高度大于页面宽度,则需另行处理
while (allH > 0) {
PDF.addImage(img.toDataURL('image/jpeg', 1.0), 'JPEG', 0, position, img.imgWidth, img.imgHeight);
allH -= img.topH || 841.89;
position -= img.topH || 841.89;
img.topH = 0;
if (allH > 0) PDF.addPage();
}
position = img.pageH;
}
});
});
PDF.save(title + '.pdf');
}
toCanvas();
}
export default getPdf;
版权声明:本文标题:页面截图导出为PDF,以及PDF强行截断分页问题的处理 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729505018a1203527.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论