jsPDF的每个页面如何添加html内容？答案

【问题标题】：How to add html content to each page of jsPDF?jsPDF的每个页面如何添加html内容？
【发布时间】：2022-11-28 10:20:00
【问题描述】：

我正在尝试使用 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"
        })

谁能指出我做错了什么？我搜索了解决方案，但许多人使用了已弃用的方法，例如 addFromHTTP，有些人建议使用换行符，例如“<!--ADD_PAGE>”_ 和 style = "page-break-before : always" 但两者都不起作用。我查看了文档，但没有得到很好的支持。请帮我。

【问题讨论】：

标签： javascript html jspdf html-to-pdf multipage

【解决方案1】：

参考这个答案(refrencing)

只需使用 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

【讨论】：