前言

在现代管理系统中，数据的归档、分享和线下流转需求日益增长。如何将前端页面的图文内容高质量导出为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