在导出为 pdf 之前等待所有 HTML 到 PDF 的转换

Question

我正在尝试使用 html2canvas 库将图表从 HTML 导出为 pdf。我首先使用 for 循环获取所有 div 并为它们生成相应的图像，一旦完成所有转换，我将调用 doc.save("file.pdf"); 函数来保存它。但是，在 for 循环完成后，我必须在超时内调用 doc.save() 函数，因为负责将 html 转换为图像的 html2canvas('div_id').then() 返回一个承诺并转换html 异步成像。有没有办法可以使用 promise 而不是 setTimeout 方法。我无法使用 promise 提出解决方案。

exportGraphonClick() {
   var metrics  = ["1", "2", "3","4","5","6"];
   var pageCount;
   var doc = new jsPDF("p", "mm"); 

    // loop
    metrics.map((key,index) =>{
      let id_val = `graph-id-${index}`; // creating IDs
      const input = document.getElementById(id_val);

      // html to pdf
      html2canvas(input).then((canvas) => {
        const imgData = canvas.toDataURL('image/JPEG');
        var width  = 300;
        doc.addImage(imgData, 'JPEG', 10, 40, width, 100);
        doc.addPage();
        pageCount = doc.internal.getNumberOfPages();
      });
    })  

     // saving pdf  
      setTimeout(()=> {
      doc.save("file.pdf");
    },2000)

}

Answer 1

您可以将 map 中使用的函数设为 async，并 await 调用 html2canvas。这将 return 一组未解决的承诺。 Promise.all() return 一个新的 Promise 将在所有提供的承诺都解决时解决。

metrics = metrics.map(async (key, index) => {
    let id_val = `graph-id-${index}`; // creating IDs
    const input = document.getElementById(id_val);

    // html to pdf
    let canvas = await html2canvas(input);
    const imgData = canvas.toDataURL('image/JPEG');
    let width  = 300;
    doc.addImage(imgData, 'JPEG', 10, 40, width, 100);
    doc.addPage();
    pageCount = doc.internal.getNumberOfPages();
})  

// saving pdf
Promise.all(metrics)
.then(() => doc.save("file.pdf"))
.catch(err => console.log(err));

在导出为 pdf 之前等待所有 HTML 到 PDF 的转换

Wait for all the HTML to PDF conversion before exporting as pdf

javascript

promise

html2canvas

jspdf

es6-promise