如何给jsPDF的每一页添加html内容？

Question

我正在尝试使用 jsPDF 将我的 html 页面转换为 pdf。本质上，我使用 jsPDF 的 html 方法，为其提供源和选项，然后在回调函数中我将保存文档。 但是当我将单个 html 文档分成多个 div 并将每个 div 保存在页面中时，我遇到了问题。我正在尝试下面的代码，它将所有页面呈现为空白。

我的 html 看起来像

<div class = "resultpage" >
  <div class = "print-section-1">
     //some content
  </div>
  <div class = "print-section-2">
     //some content again
  </div>
  <div class = "print-section-3">
     //content...
  </div>
</div>

我的 js 看起来像：

window.jsPDF = window.jspdf.jsPDF;
let doc = new jsPDF({
                    orientation : "portrait",
                    unit : 'px',
                    format : 'a4',
                    hotfixes : ["px_scaling"],
                    putOnlyUsedFonts : true
                })
 doc.html($(".prints-section-1")[0], {
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
  })
 doc.addPage()
doc.html($(".print-section-2")[0], {
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
        })
doc.addPage()
doc.html($(".print-section-3")[0], {
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
        })
doc.save("test")

这会使所有页面为空。

如果我修改 js，以获得像下面这样的回调链，我能够打印最后一个 div（在本例中为 print-side-2），但它前面的页面是空白的。

doc.html($(".print-section-1")[0], {
            callback : function(doc) {
              doc.addPage();
              doc.html($(".print-section-2")[0], {
                 callback : function(doc) {
                    doc.save("test.pdf")
                  }
                 x: 10,
                 y : 10,
                margin : [50, 200, 50, 200],
                autoPaging : "text"
              })
            }
            x: 10,
            y : 10,
            margin : [50, 200, 50, 200],
            autoPaging : "text"
        })

谁能指出我做错了什么？我搜索了解决方案，但许多解决方案使用了已弃用的方法，例如 addFromHTtml，还有一些建议使用换行符，例如“

Answer 1

引用此答案（引用）

只需使用 await 并确保在回调中return doc

类似这样

var doc = new jspdf.jsPDF({
  orientation: 'p',
  unit: 'pt',
  format: 'letter'
});


var field = "<b>html test </b>";
doc.text(10, 10, "test");
//add first html
await doc.html(field, {
  callback: function (doc) {
    return doc;
  },
  width: 210,
  windowWidth: 210, 
      html2canvas: {
          backgroundColor: 'lightyellow',
          width: 210, 
          height: 150
      },
      backgroundColor: 'lightblue', 
  x: 10,
  y: 50,
  autoPaging: 'text'
});
window.open(doc.output('bloburl'));

，现在您可以多次调用 doc.html正如您对同一文档的要求

最初由@bakuur在https： //github.com/parallax/jsPDF/issues/3074#issuecomment-1328427528