如何使用html2canvas把html导出为pdf格式

使用 html2canvas 将 HTML 导出为 PDF 的过程分为两步：

1. 使用 html2canvas 将 HTML 内容渲染为 Canvas。

2. 使用 jsPDF 将 Canvas 图像插入到 PDF 中并保存。

以下是具体实现步骤：

1. 安装依赖

首先，确保你引入了 html2canvas 和 jsPDF 库。你可以通过以下方式获取它们：

使用 CDN

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

使用 npm

如果你使用 npm 或 yarn：

npm install html2canvas jspdf
# 或
yarn add html2canvas jspdf

2. 实现代码

以下是一个完整的示例代码，将 HTML 内容导出为 PDF：

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

const getPdf = (elementId = 'pdfDom', pdfTitle = 'pdf文件') => {
  // 当下载pdf时，若不在页面顶部会造成PDF样式不对,所以先回到页面顶部再下载
  let top = document.getElementById(elementId)
  if (top != null) {
    top.scrollIntoView()
    top = null
  }
  html2Canvas(document.querySelector(`#${elementId}`), {
    scale: 2, // 提高分辨率
    logging: true, // 启用日志
    allowTaint: true,
    useCORS: true
  }).then(function(canvas) {
    // 获取canvas画布的宽高
    let contentWidth = canvas.width
    let contentHeight = canvas.height
    // 一页pdf显示html页面生成的canvas高度;
    let pageHeight = contentWidth / 841.89 * 592.28
    // 未生成pdf的html页面高度
    let leftHeight = contentHeight
    // 页面偏移
    let position = 0
    // html页面生成的canvas在pdf中图片的宽高（本例为：横向a4纸[841.89,592.28]，纵向需调换尺寸）
    let imgWidth = 641.89
    let imgHeight = 841.89 / contentWidth * contentHeight
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    let PDF = new JsPDF('l', 'pt', 'a4')
    // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度
    // 当内容未超过pdf一页显示的范围，无需分页
    if ((leftHeight + 50) < pageHeight) {
      PDF.addImage(pageData, 'JPEG', 100, 50, imgWidth, imgHeight)
    } else {
      while (leftHeight > 0) {
        PDF.addImage(pageData, 'JPEG', 100, position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= 592.28
        // 避免添加空白页
        if (leftHeight > 0) {
          PDF.addPage()
        }
      }
    }
    PDF.save(pdfTitle + '.pdf')
  })
}

使用方式： getPdf(elementId, `未命名文件.pdf`)

3. 代码说明

• html2canvas：将 HTML 元素渲染为 Canvas。

  • scale: 2：提高分辨率，避免生成的 PDF 模糊。

  • useCORS: true：允许加载跨域图片。

• jsPDF：用于创建和保存 PDF。

  • new jspdf.jsPDF('p', 'mm', 'a4')：创建一个 A4 尺寸的 PDF 文档。

  • addImage：将 Canvas 生成的图片插入到 PDF 中。

  • pdf.save('exported.pdf')：保存 PDF 文件并下载。

4. 注意事项

• 跨域图片：如果 HTML 中包含跨域图片，确保服务器允许跨域访问（CORS），否则图片可能无法渲染。

• 分辨率：通过调整 scale 参数可以提高生成 PDF 的分辨率。

• 分页：如果 HTML 内容较长，可以使用 jsPDF 的分页功能手动分页。