技術標籤：jq+jsjavascripthtml

使用jspdf+html2canvas的一些採坑

本文程式碼是基於jq+jspdf+html2canvas寫的，要實現將html文件下載成pdf，中間遇到的問題有：1、檔案下載後如果沒有置頂的話html2canvas會生成出黑屏。2、程式碼中有大片生成的echars圖表，這種只能在原有的dom節點上生成canvas，進行下載，無法cloneNode()一個節點去進行操作。3、html2canvas生成圖片時如果不對html2canvas進行配置可以顯示圖片的話，圖片顯示不出來。4、頁面中有大量的圖表（超過瀏覽器canvas繪製元素最大高度），剩餘部分會顯示顯示黑屏，解決辦法是超過部分再次生成canvas，並加到要生成的pdf物件中。

附程式碼

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");
}

程式碼實現中參考了大量文件，感謝大佬們的支援！