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) {&nbsp; var input = document.getElementById(element);&nbsp; if (input.toLowerCase().startsWith('<img')) {&nbsp; &nbsp; allPromises.push(html2canvas(input));&nbsp; } else {&nbsp; &nbsp; allPromises.push(Promise.resolve(input));&nbsp; }}Promise.all(allPromises).then(response => {&nbsp; response.forEach(input => {&nbsp; &nbsp; if (input instanceof String) {&nbsp; &nbsp; &nbsp; doc.setFont(fontName, 'bold');&nbsp; &nbsp; &nbsp; var isH3 = input.toLowerCase().startsWith('<h3>');&nbsp; &nbsp; &nbsp; writeText(input, isH3 ? h3_fontSize : h5_fontSize, isH3 ? 5 : 3);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; imgData = input.toDataURL('image/jpeg', 1.0);&nbsp; &nbsp; &nbsp; doc.addImage(imgData, 'PNG', left_edge_distance, position_mm, 100, 100);&nbsp; &nbsp; }&nbsp; });&nbsp; doc.save('download.pdf');});我会将第一块代码修改为上面的代码，其余部分保持原样。我将在这里解释它的作用：维持一系列的承诺。循环并检查输入是否为图像标签，并将返回的 Promise 存储到 html2Canvas() 的数组中否则，只需存储已解决的承诺，将输入返回到数组以维持顺序。运行 Promise.all() 并迭代 Promise 数组中的每个响应。如果是字符串，则写入文本，否则添加图像。最后，保存它。