jspdf+html2canvas各种踩坑（包括超过浏览器限制高度下载）

使用jspdf+html2canvas的一些采坑

本文代码是基于jq+jspdf+html2canvas写的，要实现将html文档下载成pdf，中间遇到的问题有：1、文件下载后如果没有置顶的话html2canvas会生成出黑屏。2、代码中有大片生成的echars图表，这种只能在原有的dom节点上生成canvas，进行下载，无法cloneNode()一个节点去进行操作。3、html2canvas生成图片时如果不对html2canvas进行配置可以显示图片的话，图片显示不出来。4、页面中有大量的图表（超过浏览器canvas绘制元素最大高度），剩余部分会显示显示黑屏，解决办法是超过部分再次生成canvas，并加到要生成的pdf对象中。

附代码

var reportBody; //转化为pdf的部分
reportBody = $("#reportBody");

function f_uploadPdf() {
    handleHtml2Down(data.reportName);
}
//生成pdf
handleHtml2Down = async (fileName) => {
    var pdf = new jsPDF('p', 'pt', 'a4');
    scrollTo(0, 0);
    const maxH = 16384
    let h = reportBody[0].scrollHeight
    var index = 0
    var pdfDom = $("#pdfDom")[0];
    while (h > 0) {
        await html2canvas(pdfDom, {
            background: "#fff",
            height: (h > maxH ? maxH : h),
            width: pdfDom.scrollWidth,
            foreignObjectRendering: true,
            allowTaint: false,
            useCORS: true,
        }).then((canvas => {
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 592.28 / contentWidth * contentHeight;
            var pageData = canvas.toDataURL('image/jpeg', 1);
            //有两个高度需要区分，一个是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();
                    }
                }
            }
            h = h - maxH;
            index++;
            pdfDom.style.height = h;
            reportBody[0].style.marginTop = `-${index * maxH}px`
        }))
    }
    reportBody[0].style.marginTop = '0px'
    pdf.save(fileName+".pdf");
}

代码实现中参考了大量文档，感谢大佬们的支持！加上了reportBody的注释，这个项目其余代码很多，项目较老，下载pdf的核心代码就是这些，其余获取echars图数据代码就不贴了。