在网页开发中，有时我们需要将网页内容转换为 PDF 格式，以供用户保存或打印。在将 HTML 内容转换为 PDF 时，有多种方法可供选择，其中包括使用 Puppeteer、pdfmake 和 html2canvas + jspdf。本文将对如何使用 html2canvas 和 jspdf 来将 HTML 内容转换为可下载和打印的 PDF 文件进行简介。

一、html2canvas + jspdf简单使用

1、安装

npm install --save html2canvas
npm install --save jspdf

2、绘制较短页面

convertToPDF() {
        const html2pdf = (element, fullPage) => {
          html2canvas(element, {
            scale: 2,
            scrollX: 0,
            scrollY: 0
          }).then((canvas) => {
            const imgData = canvas.toDataURL('image/png')
            const pdfWidth = fullPage ? canvas.width : element.clientWidth * 1.5
            const pdfHeight = fullPage ? canvas.height : element.clientHeight * 1.5
            const pdf = new jsPDF({
              orientation: fullPage ? 'landscape' : 'portrait', // 调整是否打印整页
              unit: 'px',
              format: [pdfWidth, pdfHeight]
            })
            pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)
            pdf.save('pdf文件名.pdf')
          })
        }

        const fullPageElement = document.body
        const partialPageElement = document.getElementById('your-page-id') // 需要打印的页面id
        html2pdf(fullPageElement, true)
        html2pdf(partialPageElement, false)
      }

3、绘制长页面（.html2canvas能够抓取的页面长度有限，超出不会抓取，需要分页抓取并合并到一个 PDF 文件中。）

长度超过时提示：

A page in a PDF can not be wider or taller than 14400 userUnit. jsPDF limits the width/height to 14400

解决方案：分页

convertToPDF() {
        const html2pdf = (element) => {
          html2canvas(element, { scrollY: 0 }).then((canvas) => {
            const pdf = new jspdf('p', 'mm', 'a4')
            const imgData = canvas.toDataURL('image/jpeg', 1.0)
            const pdfWidth = pdf.internal.pageSize.getWidth()
            const pdfHeight = pdf.internal.pageSize.getHeight()
            const imgHeight = (canvas.height * pdfWidth) / canvas.width

            let heightLeft = imgHeight
            let position = 0

            while (heightLeft > 0) {
              pdf.addImage(imgData, 'JPEG', 0, position, pdfWidth, imgHeight)
              heightLeft -= pdfHeight
              position -= pdfHeight
              if (heightLeft > 0) {
                pdf.addPage()
              }
            }

            pdf.save('pdf文件名.pdf')
          })
        }

        const fullPageElement = document.getElementById('your-page-id') // 需要打印的页面id
        html2pdf(fullPageElement)
      }

二、总结

优点

• 简单易用：html2canvas 和 jspdf 提供了直观的 API，可使页面内容转为 PDF 变得十分简单。
• 灵活性：html2canvas 允许捕获整个页面或特定的 DOM 元素，而 jspdf 允许自定义生成的 PDF 文件的布局和样式。
• 快速实现：使用这种方法，可以快速实现将页面内容转换为 PDF 的功能，并在客户端直接生成和下载 PDF 文件。

缺点

• 局限性：在处理复杂布局和样式时，html2canvas 可能会出现一些限制，导致生成的 PDF 内容和页面显示的效果不尽相同。
• 大量数据处理：对于包含大量数据或需要更复杂布局的情况，可能需要编写大量自定义代码来处理。
• 页面绘制转码时间比较长

总结：html2canvas 用于捕获页面的图像，而 jspdf 则可以将图像转换为 PDF 文件。尽管这种方法在处理一些特定场景下可能存在一定局限性，但对于简单的需求来说，它提供了一种简单、快速的解决方案。