前端将html导出pdf文件解决分页问题

在前端将HTML导出为PDF文件并处理分页问题时，可以使用jsPDF库和html2canvas库。以下是一个简化的例子：

1. 首先，确保在项目中包含了jsPDF和html2canvas库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

2. 编写一个函数来处理PDF的生成。

function downloadPDF() {
  const element = document.body; // 或任何你想要转换为PDF的DOM元素
  html2canvas(element).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jspdf.jsPDF({
      orientation: 'portrait',
      unit: 'px',
      format: [canvas.width, canvas.height]
    });
 
    const imgProps= pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    let heightLeft = pdfHeight;
 
    const pageHeight = pdf.internal.pageSize.getHeight();
    let position = 0;
 
    pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight);
 
    heightLeft -= pageHeight;
 
    while (heightLeft >= 0) {
      position = heightLeft - pageHeight;
      pdf.addPage();
      pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pageHeight);
      heightLeft -= pageHeight;
    }
 
    pdf.save('download.pdf');
  });
}

3. 在合适的时候调用downloadPDF函数，例如在按钮点击事件中：

<button onclick="downloadPDF()">下载PDF</button>

这段代码会将网页中的内容（document.body）转换为PDF，并处理分页，以便内容过长时可以分布在多个PDF页面上。html2canvas用于将HTML转换为canvas，然后jspdf将canvas转换为PDF。注意，这个例子假设了内容不会超出一个PDF页面的宽度。如果内容宽度超过页面宽度，你可能还需要处理水平分页。