jsPDF结合html2canvas导出PDF页码乱序及修改原页样式问题求助

成因 #

你调用的html2canvas返回的是异步Promise对象，14个生成canvas的请求是并行触发的，渲染耗时短的请求会先完成，回调里往PDF插入页面的顺序也就跟着随机，和你代码写的先后顺序无关。

解决方案 #

用async/await控制执行顺序，同时可以用循环简化重复代码，参考修改后的代码：

$('#create_pdf').on('click', async function () {  
    $('body').scrollTop(0);                 
    await createPDF();  
});  

// create pdf
async function createPDF() {  
    const doc = new jsPDF({  
        unit: 'px',  
        format: 'a4'  
    });
    const pdfWidth = doc.internal.pageSize.width - 20;
    const pageCount = 14;

    // 按顺序处理1-14的div
    for(let i = 1; i <= pageCount; i++) {
        const currentDiv = $(`#thediv${i}`);
        const originalWidth = currentDiv.width();
        const originalMaxWidth = currentDiv.css('max-width');

        // 生成canvas
        const canvas = await getCanvas(document.querySelector(`#thediv${i}`), currentDiv);
        const img = canvas.toDataURL("image/png");
        const hratio = canvas.height / canvas.width;
        const pdfHeight = pdfWidth * hratio;

        doc.addImage(img, 'PNG', 10, 10, pdfWidth, pdfHeight);
        // 最后一页不用加空白页
        if(i !== pageCount) {
            doc.addPage(595, 842);
        }

        // 还原原div样式
        currentDiv.width(originalWidth).css('max-width', originalMaxWidth);
    }

    doc.autoPrint();
    window.open(doc.output('bloburl'));
}  


// create canvas object  
function getCanvas(link, currentDiv) {                  
    currentDiv.width((a4[0] * 1.33333) - 80).css('max-width', 'none');             
    return html2canvas(link, {  
        imageTimeout: 2000,  
        removeContainer: true  
    });  
}

成因 #

你在getCanvas函数中直接修改了页面上原有div的width和max-width属性，生成canvas之后没有把属性还原，就会导致原页面显示变形。

解决方案 #

上面的修改代码里已经包含了对应修复：

• 处理每个div之前先缓存它原本的宽度、最大宽度样式
• 对应div的canvas生成完成之后，立刻把缓存的原样式赋值回去，还原页面显示

如果想完全不触碰原页面元素，可以采用离屏克隆的方案：把目标div克隆到一个position: fixed; left: -9999px; top: 0的隐藏容器里，修改克隆元素的样式生成canvas，用完直接删除克隆元素，原页面不会有任何样式变化。

内容的提问来源于stack exchange，提问作者Pamela Whittaker