Question

我正在尝试使用html2canvas库将图形从HTML导出到pdf。我首先使用for循环获取所有div，并为它们生成相应的图像，完成所有转换后，我将调用doc.save("file.pdf");函数来保存它。但是，在for循环完成后，我必须在超时内调用doc.save（）函数，因为负责将html转换为图像的html2canvas('div_id').then()返回了一个promise，并将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。这将返回未解决的Promises数组。 Promise.all()返回一个新的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));

等待所有HTML到PDF的转换，然后导出为pdf

1 个答案: