使用数组

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

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

文件包含顺序数据。所有文件操作符都基于这样一个前提：无论您对文件做什么，您通常都会按顺序进行。

因此，当您读取数据，然后读取更多数据时，您将获得文件的连续块。 FILE 数据类型和操作系统本身都会为您做很多事情，包括跟踪您在文件中的当前位置以及在内存中进行块缓冲以提高性能。

如果您想重新读取相同的数据，或在文件中跳过，您需要在下一次读取之前使用 fseek() 更改文件中的位置。

/*
 * @Description: html 转为 pdf 并下载
 * @Author: cmyoung
 * @Date: 2018-08-10 19:07:32
 * @LastEditTime: 2019-08-23 16:34:18
 */

/**
 * @param html { String } DOM树
 * @param isOne { Boolean }  是否为单页 默认 否(false)
 * @return 文件 {pdf格式}
 */

''use strict''
import * as jsPDF from ''jspdf''
import html2canvas from ''html2canvas''

export default async (html, isOne) => {
  let contentWidth = html.clientWidth // 获得该容器的宽
  let contentHeight = html.clientHeight // 获得该容器的高
  let canvas = document.createElement(''canvas'')
  let scale = 2  // 解决清晰度问题，先放大 2倍

  canvas.width = contentWidth * scale // 将画布宽&&高放大两倍
  canvas.height = contentHeight * scale
  canvas.getContext(''2d'').scale(scale, scale)

  let opts = {
    scale: scale,
    canvas: canvas,
    width: contentWidth,
    height: contentHeight,
    useCORS: true
  }

  return html2canvas(html, opts).then(canvas => {
    let pageData = canvas.toDataURL(''image/jpeg'', 1.0) // 清晰度 0 - 1
    let pdf

    if (isOne) {
      // 单页
      console.log(contentWidth, ''contentWidth'')
      console.log(contentHeight, ''contentHeight'')

      // jspdf.js 插件对单页面的最大宽高限制 为 14400
      let limit = 14400

      if (contentHeight > limit) {
        let contentScale = limit / contentHeight
        contentHeight = limit
        contentWidth = contentScale * contentWidth
      }

      let orientation = ''p''
      // 在 jspdf 源码里，如果是 orientation = ''p'' 且 width > height 时， 会把 width 和 height 值交换，
      // 类似于 把 orientation 的值修改为 ''l'' , 反之亦同。
      if (contentWidth > contentHeight) {
        orientation = ''l''
      }

      // orientation Possible values are "portrait" or "landscape" (or shortcuts "p" or "l")
      pdf = new jsPDF(orientation, ''pt'', [contentWidth, contentHeight]) // 下载尺寸 a4 纸 比例

      // pdf.addImage(pageData, ''JPEG'', 左，上，宽度，高度)设置
      pdf.addImage(pageData, ''JPEG'', 0, 0, contentWidth, contentHeight)

    } else {
      //一页 pdf 显示 html 页面生成的 canvas高度
      let pageHeight = (contentWidth / 552.28) * 841.89
      //未生成 pdf 的 html页面高度
      let leftHeight = contentHeight
      //页面偏移
      let position = 0
      //a4纸的尺寸[595.28,841.89]，html 页面生成的 canvas 在pdf中图片的宽高
      let imgWidth = 555.28
      let imgHeight = (imgWidth / contentWidth) * contentHeight

      pdf = new jsPDF('''', ''pt'', ''a4'') // 下载尺寸 a4 纸 比例
      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, ''JPEG'', 20, 0, imgWidth, imgHeight)
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, ''JPEG'', 20, position, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= 841.89
          //避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage()
          }
        }
      }
    }
    return pdf
  })
}