jspdf - 带有 jsPDF .html() 功能的多页 pdf

Question

我正在尝试使用 jsPDF 及其.html()函数创建从 html 字符串生成的多页 pdf 。

html 字符串生成看起来像这样：

let htmlString = `<div style="display: grid; grid-gap: 1px; grid-template-columns: repeat(29, 1fr); grid-template-rows: repeat(29, 1fr); padding: 1px; width: calc(29 * 6.275mm); width: 688px;">`;

for(let i = 0; i < 29; i++) {
  for(let j = 0; j < 29; j++) {
    // pixel is generated by accessing an array via the i and j of the loops
    const pixel = { blue: `string`, green: `string`, name: `string`, red: `string` };
    htmlString += `<div style="background-color: rgb(${pixel.red}, ${pixel.green}, ${pixel.blue});">${pixel.name}</div>`;
  }
}
htmlString += `</div>`;

当用户单击按钮时，会根据 htmlString 生成 pdf。

protected async downloadPdf(): Promise<void> {
  this.jsPDF = new jsPDF({
    format: `a4`,
    hotfixes: [`px_scaling`],
    orientation: `portrait`,
    unit: `px`,
  });
  await this.jsPDF.html(htmlString, {
    callback: doc => {
      doc.save(`test PDF`);
    },
    x: 10,
    y: 10,
  });
}

在 htmlString 中有特定点，我想在 pdf 中插入新页面并继续在新页面上打印字符串内容。我发现了多个使用 jsPDF 的图像和画布功能的 SO 线程，但到目前为止还没有一个可以使用原始 html 字符串。我不想将我的 html 字符串转换为图像，因为我不想失去生成的 PDF 中文本的可访问性。

有没有办法在使用该.html()函数时在生成的 PDF 中插入页面，或者我是否必须div自己插入具有特定类的元素（包括样式以填充页面在插入所需内容后的剩余空间）以强制下一个内容块在新页面上开始？

标签： jspdf