html2canvas 在 php 循环中不工作

Question

我有一个 javascript 函数 print()。它由 php 循环调用。它在一个页面上显示 2 个图像副本。

如果我运行它 1 次，没有任何问题，下面的功能有效。但是如果我运行它超过 1 次，由于 hmtl2canvas 的承诺性质，它会损坏。

我搜索了使 html2canvas 工作同步但没有太多解决方案

我也试着把它放在 async/await 里，但是 none 能用。

function print(html_string){

  let leftPanel = 'left'+Date.now(); //create Unique ID
  let rightPanel = 'right'+Date.now(); //create Unique ID

  document.body.innerHTML += "<div style='display:flex;'><div id='"+leftPanel+"'></div><div id='"+rightPanel+"'></div></div>";
  var iframe=document.createElement('iframe');
  document.body.appendChild(iframe);

  var iframedoc=iframe.contentDocument||iframe.contentWindow.document;
  iframedoc.body.innerHTML=html_string;

  html2canvas(iframedoc.body).then(canvas => {
      jQuery("#"+leftPanel).append(canvas);
  });
  html2canvas(iframedoc.body).then(canvas => {
      jQuery("#"+rightPanel).append(canvas);
      document.body.removeChild(iframe);
  });
}

编辑：

上面的 javascript 函数被下面的 php 循环调用：

foreach($InvoiceNos as $row){
  $downloadedInvoiceHtml = requestInvoice($row->UUID);
  ?><script>print('<?=$downloadedInvoiceHtml?>');</script><?php
}

Answer 1

使用数组

<script>
const html = [];
<?php 
 foreach($InvoiceNos as $row){
  $downloadedInvoiceHtml = requestInvoice($row->UUID);
  ?>html.push('<?=$downloadedInvoiceHtml?>');<?php
} ?>

let cnt = 0;
function print(){
  if (cnt >= html.length) return; // stop
  $("body").append(`<div style='display:flex;'><div></div><div></div></div>`);
  const div = document.createElement("div");
  div.innerHTML = html[cnt]
  html2canvas(div).then(canvas => {
    $("body div:last-child div").append(canvas);
    cnt++;
    print()
  });
}
print()
</script>

或者

<?php 
 foreach($InvoiceNos as $row){
  $downloadedInvoiceHtml = requestInvoice($row->UUID);
  ?><div style="display:flex"><div class="html"><?=$downloadedInvoiceHtml?></div></div>
  } ?>
<script>
let cnt = 0;
const $html = $(".html");
function print(){
  if (cnt >= $html.length) return; // stop
  $current = $html[cnt]
  html2canvas($html).then(canvas => {
    $current.empty().append(canvas);
    $current.after($current.clone(true);
    cnt++;
    print()
  });
}
print()
</script>

Answer 2

无需在每个循环中执行 print()，只需将内容存储在变量中并在完成后打印结果。

html2canvas 在 php 循环中不工作

html2canvas not working inside a php loop

javascript

promise

async-await

html2canvas