前端实战：利用html2canvas+jsPDF实现动态HTML内容一键导出PDF（附分页优化）

关注

VIP免费原创最新推荐文章于 2026-08-04 16:18:23 发布 557 阅读 AI 写同款· GEO 优化 ›

前端生成pdf之html2canvas+jsPDF，以及解决图片不显示bug 开发背景：需要给页面中相应的内容生成pdf，查找文档后发现要用到两个插件。html2canvas 以及 jsPDFjsPDF参数下面是dom转化为pdf 的基本代码需要特别注意一下 html2canvasonclone方法。它是当DOM被克隆后进行渲染时的回调函数，可用于修改将要渲染的内容，而不会影响原始DOM。当你需要在生成快照前操作 DOM（例如隐藏打印按钮）时，会非常有用。阅读详情

1. 为什么我们需要纯前端导出PDF？

做前端开发的朋友，肯定都遇到过这样的需求：用户在前端页面填写了一个表单、生成了一个报表，或者查看了一份合同，然后他点击一个按钮，就想把当前看到的内容，原封不动地保存成一个PDF文件。这个需求太常见了，无论是后台管理系统里的数据导出，还是电商平台里的订单详情，甚至是教育平台里的学习报告，都离不开它。

以前，这种功能通常要依赖后端。前端把数据或者HTML结构传给后端，后端用像iText、wkhtmltopdf这样的库去生成PDF，然后再把文件流返回给前端下载。这个流程有几个痛点：第一，它依赖网络请求，用户得等；第二，它增加了服务器的压力和复杂度；第三，如果页面里有复杂的动态样式或者图表，后端渲染出来的效果很可能和前端看到的不一致，沟通成本很高。

所以，纯前端导出PDF的方案就变得非常有吸引力。它的核心优势就是“所见即所得”。用户在浏览器里看到的是什么样，导出的PDF就是什么样，完全一致。而且整个过程在用户本地浏览器里完成，不消耗服务器资源，速度快，体验好。html2canvas和jsPDF这两个库的组合，就是实现这个目标的黄金搭档。简单来说，html2canvas负责“截图”，它能把任意的DOM节点（包括里面的文字、图片、CSS样式、甚至Canvas绘制的图表）渲染成一个<canvas>画布。然后，jsPDF负责“打印”，它把这个画布上的图像，按照PDF的格式一页一页地“打印”出来，最终生成一个.pdf文件。

听起来是不是挺简单的？但实际做起来，坑可不少。比如，你的内容超过一页A4纸怎么办？分页的时候，一个表格的行或者一段文字被生生截成两半，上半截在第一页，下半截跑到第二页，这体验就太糟糕了。再比如，你用了ECharts图表，导出来发现糊成一片，根本看不清。还有图片跨域、清晰度不够、生成速度慢等等问题。这篇文章，我就结合我这些年踩过的坑和积累的经验，带你从零开始，一步步实现一个健壮的、支持智能分页、高清导出的前端PDF生成方案。我会把原理讲透，把代码掰开揉碎，保证你跟着做就能搞定。

2. 环境搭建与基础入门

工欲善其事，必先利其器。我们首先得把这两个核心库引入到项目里。现在前端项目主要分两种：传统的老项目（可能直接用<script>标签）和基于Vue/React的现代工程化项目。我两种都会讲，你可以根据自己的情况选择。

2.1 引入核心库：html2canvas 和 jsPDF

对于传统项目或者快速原型，最直接的方式就是使用CDN。你可以在HTML文件的<head>或<body>底部直接引入。我比较推荐放在<body>结束前，这样不会阻塞页面渲染。

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

这里有个小细节，jsPDF提供了不同格式的包。jspdf.umd.min.js是通用模块定义格式，既可以用<script>标签直接引入（此时jsPDF会挂载到全局window对象上），也可以被AMD或CommonJS模块系统识别，兼容性最好。

对于Vue或React项目，我强烈推荐使用npm或yarn来安装。这样能更好地管理版本，也方便打包工具进行优化。

# 在你的项目根目录下运行
npm install html2canvas jspdf --save
# 或者
yarn add html2canvas jspdf

安装好后，在你需要使用的Vue组件或React组件中，用import语句引入即可。

// 在Vue的<script>标签内或React组件文件中
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf'; // 注意：jsPDF是具名导出

2.2 实现第一个“Hello PDF”

库准备好了，我们来写一个最简单的功能：点击按钮，把页面上一个<div>里的内容导出成PDF。这个过程能帮你快速理解整个工作流。

假设我们有一个这样的HTML结构：

<div id="export-container" style="padding: 20px; border: 1px solid #ccc;">
  <h1>我的第一份前端PDF</h1>
  <p>这是一段测试文本，看看能不能顺利变成PDF。</p>
  <img src="./logo.png" alt="Logo" width="100">
</div>
<button id="export-btn">导出PDF</button>

对应的JavaScript代码如下：