Javascript 使用pdf2htmljs创建多个PDF

我编写了以下代码来使用html2pdf.js创建几个pdf文件。后来我想把它们保存到一个档案中，然后下载所说的档案。我正在使用jsZip创建和填充归档文件，并使用fileSaver进行保存：

window.zip = new JSZip();
let masterDiv = document.createElement('div');
masterDiv.id = 'masterDiv';
document.body.appendChild(masterDiv);

// Stundenplan für jeden Kandidaten erstellen
for (let i = 0; i < window.allCandidates.length; i++) {
  let candidate = window.allCandidates[i].split(',');
  window.lastName = candidate[0];
  window.firstName = candidate[1];
  window.filter = 'candidate';
  setScheduleView('masterDiv');

  let worker = html2pdf();

  let opt = {
    margin: 1,
    image: {
      type: 'jpeg',
      quality: 1
    },
    html2canvas: {
      scale: 2
    },
    jsPDF: {
      unit: 'mm',
      format: 'A3',
      orientation: 'portrait'
    }
  };

  // PDF erstellen
  worker.set(opt).from(masterDiv).outputPdf().then((pdf) => {
    window.zip.file(window.lastName + '.' + window.firstName + '.pdf', pdf, {
      binary: true
    });
  });

  setTimeout(() => {
    clearDiv(masterDiv);
    worker = null;
  }, 50);
}

setTimeout(() => {
  window.zip.generateAsync({
    type: "blob"
  }).then(function(content) {
    saveAs(content, "allPDFs.zip");
  });
}, 2000);

window.zip=newjszip（）；
让masterDiv=document.createElement（'div'）；
masterDiv.id='masterDiv'；
文件.正文.附件（masterDiv）；
//斯泰登计划
for（设i=0；i{
window.zip.file（window.lastName+'.+window.firstName+'.pdf'，pdf{
二进制：对
});
});
设置超时（（）=>{
clearDiv（masterDiv）；
worker=null；
}, 50);
}
设置超时（（）=>{
window.zip.generateAsync({
类型：“blob”
}).然后（功能（内容）{
saveAs（内容为“allPDFs.zip”）；
});
}, 2000);

---

我现在的问题是：我得到的不是每个循环一个pdf，而是一个包含完整内容的pdf。为了让html2pdf.js明白它应该为每个循环创建一个新的pdf文件，我需要做哪些更改？

似乎您没有正确地等待异步操作完成，特别是清除div的操作可能是在生成pdf之前执行的，zip生成也可能会发生同样的情况，根据您希望处理PDF的方式，这里有几个选项：

与async/await配合使用：

/。。。
异步函数generatePDFs（）{
对于（让我们看一下窗口。所有候选人）{
设候选者=cand.split（'，'）；
// ...
//等待每一位员工在下一个项目之前完成
等待worker.set（opt）.from（masterDiv）.outputPdf（）。然后（（pdf）=>{
window.zip.file（window.lastName+'.+window.firstName+'.pdf'，pdf{
二进制：对
});
clearDiv（masterDiv）；
});
}
window.zip.generateAsync({
类型：“blob”
}).然后（功能（内容）{
saveAs（内容为“allPDFs.zip”）；
});
}

与reduce:配合使用，以防无法使用async/await

//创建一个函数数组，以便每个函数
//为候选人生成pdf，然后清除div。
让pdfGenerators=allCandidates.map（（cand）=>{
return（）=>{
设候选者=cand.split（'，'）；
// ...
返回worker.set（opt）.from（masterDiv）.outputPdf（）。然后（（pdf）=>{
window.zip.file（window.lastName+'.+window.firstName+'.pdf'，pdf{
二进制：对
});
clearDiv（masterDiv）；
});
}
});
//从已解决的承诺开始，在pdf生成器阵列上调用reduce，因此
//每次一个承诺得到解决，你都会将下一个承诺排队，然后生成
//拉链
pdfGenerators.reduce（（pre，curr）=>pre.then（curr），Promise.resolve（））然后（（）=>{
window.zip.generateAsync({
类型：“blob”
}).然后（功能（内容）{
saveAs（内容为“allPDFs.zip”）；
})
});

与Promise并行。all：对于这种方法（通常）停止使用全局变量，而是创建一个函数，声明生成PDF所需的所有内容：

/。。。
函数generatePDF（候选函数，i）{
设div=document.createElement（'div'）；
div.id=`candidate-${i}`；
文件.正文.附加（div）；
setScheduleView（div.id）；
让[lastName，firstName]=candidate.split（'，'）；
// ...
返回worker.set（opt）.from（div）.outputPdf（）。然后（（pdf）=>{
window.zip.file（lastName+'.+firstName+'.pdf'，pdf{
二进制：对
});
clearDiv（div）；
});
}
//等待生成所有PDF（并行）
Promise.all（allCandidates.map（generatePDF））。然后（（）=>{
window.zip.generateAsync({
类型：“blob”
}).然后（功能（内容）{
saveAs（内容为“allPDFs.zip”）；
});
});

---

为了正确处理JS中的异步编程，请阅读和。

我不熟悉库，但我想您应该在循环中运行

window.zip.generateAsync

。您是否也在使用计时器等待异步调用？如果是这样，那么你也应该改变它，因为你永远不知道生成pdf需要多长时间。