html2canvas+jspdf前端生成pdf以及处理分页图片文字被截断问题 注:使用html2canva

html2canvas 是一个非常有用的前端库，可以将网页中的 HTML 元素转换为 Canvas 元素，从而实现将网页内容保存为图片或 PDF 的功能。而 jspdf 则是一个用于生成 PDF 文件的 JavaScript 库。

如果使用 html2canvas 生成 PDF 文件，一般的做法是先将网页转换为 Canvas 元素，然后使用 jspdf 将 Canvas 元素转换为 PDF 文件，代码示例如下：

html2canvas(document.body).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF();
  pdf.addImage(imgData, 'PNG', 0, 0);
  pdf.save('download.pdf');
});

这段代码会将整个网页转换为一个 Canvas 元素，并将 Canvas 元素转换为一个 PNG 图片，然后将 PNG 图片添加到一个新的 PDF 文件中，并进行下载。但是，这种方法存在一个问题：如果网页内容比较长，就会出现分页的情况，而在分页处，图片和文字可能会被截断。这是因为 html2canvas 只能将当前可见的部分转换为 Canvas 元素，而无法处理未渲染的部分。

解决这个问题的方法是将网页分为多个部分，分别进行转换，然后将转换后的 PDF 文件合并起来。代码示例如下：

const options = { scale: 2 };
const promises = [];
let pdf;

document.querySelectorAll('.page').forEach(page => {
  promises.push(
    html2canvas(page, options)
      .then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        pdf.addImage(imgData, 'PNG', 0, 0);
        if (promises.length === document.querySelectorAll('.page').length) {
          pdf.save('download.pdf');
        }
      })
  );
});

Promise.all(promises).then(() => {
  pdf = new jsPDF();
});

这段代码将网页分为多个部分，每个部分都是一个 class 为 "page" 的元素，然后将每个部分转换为 Canvas 元素，并添加到一个新的 PDF 文件中。在所有部分都转换完成之后，将 PDF 文件进行下载。