循环节点生成PDF文档空白问题

Question

一个页面有多个节点，循环打印每个节点并生成pdf文档，html2canvas截取部分正常，但只有第一个节点能正常生成PDF文档，其余节点生成的都是空白文档

没有任何报错，为了排除错误，该页面不存在图片，且在每个节点截图时，都将其置顶视图

    var downPdf = document.querySelectorAll(".main_area");
    const header = document.querySelector('.pdf-header');
    const footer = document.querySelector('.pdf-footer');

    for (let i = 0; i < downPdf.length; i++) {
            window.pageYOffset=downPdf[i].offsetTop
            document.documentElement.scrollTop=downPdf[i].offsetTop
            handleOutput(downPdf[i],header,footer)
    }

async function handleOutput(dom,header,footer) {
    // window.pageYOffset=0
    // document.documentElement.scrollTop=0

    try {
        await outputPDF({
            element: dom,
            footer: footer,
            header: header,
            contentWidth: 592.28,
            filename:'{$report.value.excel_1}_report.pdf'
        })
    } catch (error) {
        console.log("shibai")
    }

}

在html2canvas内部参数也设置了参数，排除滚动条原因生成截图异常的问题

document.body.appendChild(canvas);显示出生成截图一切正常，但除了第一个节点，其他生成的PDF文档都是空白的

html2canvas(element, {
    dpi:350,
    scale:4,
    useCORS:true,
    background:'#fff',
    // windowWidth:element.scrollWidth,
    // windowHeight:element.scrollHeight,
    x:0,
    y:element.offsetTop,
    onrendered: function (canvas) {
      // console.log(canvas)
      document.body.appendChild(canvas);
    }

Answer 1

可以看到在循环中调用 handleOutput 函数，但是没有看到在函数内部调用的 outputPDF 函数的实现。如果 outputPDF 函数没有问题，那么可能需要检查一下 handleOutput 函数的实现。

还有一点，提到在 html2canvas 函数中使用了一些参数。但是没有说明这些参数的作用。下面是 html2canvas 函数中可能有用的一些参数：

scale：调整截图的放大倍数。
useCORS：如果设为 true，就 html2canvas 会可以试试加载图片的 CORS 元数据。
background：设置 canvas 的背景色。
x：调整截图的水平偏移量。
y：调整截图的垂直偏移量。
可以试试使用这些参数来调整截图的位置和大小，看看是否能解决问题。

此外也可以试试使用控制台调试来查看 html2canvas 函数是否有问题。可以在调用 html2canvas 函数之前，在控制台中输入以下代码来启用调试模式：

html2canvas.debug = true;

这样当 html2canvas 函数运行时，会在控制台中输出详细的调试信息。
望采纳。