前言
在现代管理系统中，数据的归档、分享和线下流转需求日益增长。如何将前端页面的图文内容高质量导出为PDF，成为许多企业和开发者关注的技术点。本文以实际项目为例，系统梳理前端导出PDF的完整实现思路与优化经验。
一、项目背景与需求分析
1.1 背景故事
在某管理系统的实际业务中，客户经常需要将专利信息、专利内容、专利说明等图文混排页面导出为PDF，方便线下归档、汇报或发送给合作方。以往只能截图或手动排版，既不美观也不高效。客户提出：“能不能一键导出成PDF，图片和文字都要和页面一样，最好还能分页整齐？”
1.2 需求要点
- 图片和文字样式与页面一致
- 图片三列并排显示
- 避免分页时图片或内容被切割
- 导出内容铺满A4纸张，无多余留白
二、需求分析与技术难点
2.1 需求拆解
- 支持图文混排、表格、图片等多种内容类型
- 保证导出内容与页面视觉一致
- 支持自动分页，且分页美观
2.2 技术难点预判
- 样式丢失：复杂布局、scoped样式、CSS变量等兼容性问题
- 图片丢失或不清晰：图片跨域、未加载完成、分辨率低等
- 分页问题：内容多时如何自动分页，如何避免图片或段落被切割
- 内容宽度适配：如何让内容铺满A4纸张，无多余留白
三、技术选型与调研对比
3.1 技术栈说明
- 前端框架：Vue3 + Element Plus
- PDF导出库：html2pdf.js（集成 html2canvas + jsPDF）
- 样式：SCSS
3.2 第三方库调研对比
| 库名 | 优点 | 缺点 |
|---|---|---|
| html2pdf.js | 上手快，API简单，支持html2canvas+jsPDF组合，支持图片、样式较好 | 分页能力有限，复杂布局兼容性一般，分页需手动优化 |
| jsPDF | 纯JS生成PDF，API丰富，支持自定义内容 | 直接渲染HTML能力弱，需手动排版，图片和样式支持有限 |
| pdfmake | 支持复杂表格、内容流式排版 | 需用JSON描述内容，不能直接渲染HTML，学习成本高 |
| puppeteer | 基于Chrome，渲染效果接近真实页面，支持复杂CSS | 需Node环境，前端不可用，部署复杂，适合后端批量生成 |
| dom-to-image | 可将DOM转为图片，配合jsPDF导出 | 只能导出为图片，文字不可选，PDF体积大 |
3.3 选型理由
- 需要前端直接导出，不能依赖后端
- 需要保留页面样式和图片
- 需要一定的分页能力
- 最终选择了 html2pdf.js，它集成了html2canvas和jsPDF，能较好地兼容图片和样式，且API简单，适合前端一键导出。
四、实现方案与关键步骤
4.1 安装与引入
pnpm install html2pdf.js
# 或 npm install html2pdf.js
页面中引入：
import html2pdf 
