亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

canvas2html 到 jsPDF - 處理 Promise 的問題

canvas2html 到 jsPDF - 處理 Promise 的問題

12345678_0001 2023-09-21 10:50:45
我正在使用 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我的問題是:我怎樣才能得到承諾之外的結果?
查看完整描述

1 回答

?
UYOU

TA貢獻1878條經驗 獲得超4個贊

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. 最后,保存它。


查看完整回答
反對 回復 2023-09-21
  • 1 回答
  • 0 關注
  • 144 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號