页面截图导出为PDF，以及PDF强行截断分页问题的处理

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