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(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);
}
可以看到在循环中调用 handleOutput 函数,但是没有看到在函数内部调用的 outputPDF 函数的实现。如果 outputPDF 函数没有问题,那么可能需要检查一下 handleOutput 函数的实现。
还有一点,提到在 html2canvas 函数中使用了一些参数。但是没有说明这些参数的作用。下面是 html2canvas 函数中可能有用的一些参数:
scale:调整截图的放大倍数。
useCORS:如果设为 true,就 html2canvas 会可以试试加载图片的 CORS 元数据。
background:设置 canvas 的背景色。
x:调整截图的水平偏移量。
y:调整截图的垂直偏移量。
可以试试使用这些参数来调整截图的位置和大小,看看是否能解决问题。
此外也可以试试使用控制台调试来查看 html2canvas 函数是否有问题。可以在调用 html2canvas 函数之前,在控制台中输入以下代码来启用调试模式:
html2canvas.debug = true;
这样当 html2canvas 函数运行时,会在控制台中输出详细的调试信息。
望采纳。