canvas2html 到 jsPDF - 处理 Promise 的问题

Question

我正在使用 jsPDF 将 html 块转换为 PDF 文件。我检查 HTML 并检查是否有文本或图像。我用于doc.text文本和doc.addImage图像。我很难处理来自 的响应，canvasOutput = html2canvas(input)因为它是Promise. 我的代码如下所示：  for (const element of htmlData) {    input = document.getElementById(element);    var typ = input.innerHTML.substring(23, 27);    if (typ == '<h3>') {      doc.setFont(fontName, 'bold');      writeText(input, h3_fontSize, 5);    } else if (typ == '<h5>') {      doc.setFont(fontName, 'bold');      writeText(input, h5_fontSize, 3);    } else if (typ == '<img') {      var canvasOutput = html2canvas(input);      canvasOutput.then((response) => {        imgData = response.toDataURL('image/jpeg', 1.0);        doc.addImage(imgData, 'PNG', left_edge_distance, position_mm, 100, 100);      });    }  }  doc.save('download.pdf');该函数writeText()包含以下代码：function writeText(input, fontSize, lineSpace) {    doc.setFontSize(fontSize);    var content = input.innerHTML.substring(27, input.innerHTML.length - 11);    var splitText = doc.splitTextToSize(content, max_text_width);    splitText.forEach((element) => {      doc.text(element, left_edge_distance, position_mm);      position_mm = position_mm + fontSize * pixelTrans + lineSpace;    });  }输出文件不包含图像，但是当我复制doc.save()承诺的响应函数内部时，图像会进入我的 PDF 中。html2canvas我的问题是：我怎样才能得到承诺之外的结果？

Answer 1

var allPromises = [];

for (const element of htmlData) {

  var input = document.getElementById(element);

  if (input.toLowerCase().startsWith('<img')) {

    allPromises.push(html2canvas(input));

  } else {

    allPromises.push(Promise.resolve(input));

  }

}

Promise.all(allPromises).then(response => {

  response.forEach(input => {

    if (input instanceof String) {

      doc.setFont(fontName, 'bold');

      var isH3 = input.toLowerCase().startsWith('<h3>');

      writeText(input, isH3 ? h3_fontSize : h5_fontSize, isH3 ? 5 : 3);

    } else {

      imgData = input.toDataURL('image/jpeg', 1.0);

      doc.addImage(imgData, 'PNG', left_edge_distance, position_mm, 100, 100);

    }

  });

  doc.save('download.pdf');

});

我会将第一块代码修改为上面的代码，其余部分保持原样。我将在这里解释它的作用：

1. 维持一系列的承诺。

2. 循环并检查输入是否为图像标签，并将返回的 Promise 存储到 html2Canvas() 的数组中

3. 否则，只需存储已解决的承诺，将输入返回到数组以维持顺序。

4. 运行 Promise.all() 并迭代 Promise 数组中的每个响应。

5. 如果是字符串，则写入文本，否则添加图像。

6. 最后，保存它。