页面截图导出为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;
