Javascript html2canvas在php循环中不工作

我有一个javascript函数

print（）

。它由php循环调用。它在一页上显示图像的两个副本

若我运行它一次，并没有什么是错误的，下面的功能工作。但由于hmtl2canvas的承诺性质，如果我运行它超过1次，它就会腐败

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

我还尝试将它放在异步/等待中，但它们都不起作用

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);
  });
}

函数打印（html\u字符串）{
leftPanel='left'+Date.now（）；//创建唯一ID
让rightPanel='right'+Date.now（）；//创建唯一ID
document.body.innerHTML+=“”；
var iframe=document.createElement（'iframe'）；
document.body.appendChild（iframe）；
var iframedoc=iframe.contentDocument | | iframe.contentWindow.document；
iframedoc.body.innerHTML=html\u字符串；
html2canvas（iframedoc.body）。然后（canvas=>{
jQuery（“#”+leftPanel）.append（画布）；
});
html2canvas（iframedoc.body）。然后（canvas=>{
jQuery（“#”+右面板）.append（画布）；
document.body.removeChild（iframe）；
});
}

编辑：

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

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

foreach（$InvoiceNos作为$row）{
$downloadedInvoiceHtml=requestInvoice（$row->UUID）；
？>打印（“”）；使用数组

<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>


常量html=[]；
html.push（“”）；
设cnt=0；
函数打印（）{
如果（cnt>=html.length）返回；//停止
$（“正文”）。追加（``）；
const div=document.createElement（“div”）；
div.innerHTML=html[cnt]
html2canvas（div）.然后（canvas=>{
$（“body div:last child div”）.append（画布）；
cnt++；
打印（）
});
}
打印（）

或者

<?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>


} ?>
设cnt=0；
常量$html=$（“.html”）；
函数打印（）{
如果（cnt>=$html.length）返回；//停止
$current=$html[cnt]
html2canvas（$html）。然后（canvas=>{
$current.empty（）.append（画布）；
$current.after（$current.clone（true））；
cnt++；
打印（）
});
}
打印（）
使用数组

<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>


常量html=[]；
html.push（“”）；
设cnt=0；
函数打印（）{
如果（cnt>=html.length）返回；//停止
$（“正文”）。追加（``）；
const div=document.createElement（“div”）；
div.innerHTML=html[cnt]
html2canvas（div）.然后（canvas=>{
$（“body div:last child div”）.append（画布）；
cnt++；
打印（）
});
}
打印（）

或者

<?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>


} ?>
设cnt=0；
常量$html=$（“.html”）；
函数打印（）{
如果（cnt>=$html.length）返回；//停止
$current=$html[cnt]
html2canvas（$html）。然后（canvas=>{
$current.empty（）.append（画布）；
$current.after（$current.clone（true））；
cnt++；
打印（）
});
}
打印（）
不要在每个循环上执行
print（）
，只需将内容存储在变量中，并在完成后打印结果。
不要在每个循环上执行
print（）
，只需将内容存储在变量中，并在完成后打印结果。
这是一个“php循环”？@Dave no这是一个javascript函数，编辑了问题并添加了缺少的php部分。将html添加到数组中。然后在现在执行的
document.body.removeChild（iframe）；
处再次调用该函数，并将其添加到计数器中。计数器>时停止array@HOY查看我的更新example@mplungjan谢谢我正在检查这是一个“php循环”？@Dave no这是一个javascript函数，编辑了问题并添加了缺少的php部分。将html添加到数组中。然后在现在执行
document.body.removeChild（iframe）的位置再次调用该函数；
并将其添加到计数器中。当计数器>=array@HOY查看我的更新example@mplungjan谢谢我正在检查代码中有一些小问题，但结构帮助我解决了问题！谢谢。：）是的，我没有做一个工作示例，因为我没有一个开始。代码中有一些小问题，但结构帮助我解决了问题！谢谢。：）是的，我没有做一个工作示例，因为我没有一个开始