浏览器原生打印导出PDF最简单可靠，按Ctrl+P/Cmd+P选“保存为PDF”，勾选Background graphics、设Margin为None，并确保动态内容已加载完成。
浏览器直接打印成 PDF 最简单可靠
绝大多数 HTML 页面不需要额外工具，用浏览器原生打印功能就能导出为 PDF，兼容性好、样式保留度高，且不依赖后端或第三方服务。
- 按
Ctrl+P（Windows/Linux）或Cmd+P（macOS），在打印对话框中选择“保存为 PDF”或“Microsoft Print to PDF”等虚拟打印机 - 务必勾选
Background graphics（背景图形），否则 CSS 中的background-color或background-image会被忽略 - 设置
Margin为“None”或“Minimum”，避免内容被截断；部分浏览器（如 Chrome）需在“更多设置”里手动展开并调整 - 若页面含大量动态内容（如 React/Vue 渲染后 DOM），请确认打印前数据已加载完成，否则可能导出空白或不完整结构
jsPDF + html2canvas 导出带样式的 PDF（前端方案）
适合需要按钮触发、自动下载、或对导出时机有控制的场景。但要注意：html2canvas 是截图逻辑，不是真正渲染 HTML，因此不支持 CSS3 3D 变换、transform: scale()、部分伪元素、以及跨域图片（会触发 canvas 污染）。
- 必须引入两个库：
jspdf.umd.min.js和html2canvas.min.js，顺序不能错（html2canvas 要先加载） - 目标容器建议用
id="export-area"显式标记，并临时移除浮动、固定定位、溢出隐藏等干扰截图的样式 - 导出代码中需设置
scale: 2提升截图清晰度，否则 PDF 文字模糊；同时传入useCORS: true尝试加载同域图片资源 - 不支持分页自动处理——长页面会被压缩进单页或截断，如需分页，得手动切 DOM 并多次调用
addPage()
const element = document.getElementById('export-area');
html2canvas(element, { scale: 2, useCORS: true }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jspdf.jsPDF('p', 'mm', 'a4');
const imgWidth = 210; // A4 宽度 mm
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
pdf.save('export.pdf');
});服务端生成 PDF 更稳定但需额外部署
当页面含敏感数据、需精确分页、或要合并数据库内容时，前端截图方案不可靠，应交由服务端处理。主流选择是 Node.js 的 pdfmake 或 puppeteer，后者能真实复现浏览器渲染结果。
-
puppeteer启动 Chromium 实例，调用page.goto()加载 HTML，再执行page.pdf()，可完美支持 JavaScript、字体、媒体查询 - 注意
waitUntil: 'networkidle0'参数，确保所有资源（尤其是异步图表、API 数据）加载完毕再截图 - Linux 服务器部署需安装 Chromium 依赖（如 Debian 上装
libnss3、libatk1.0-0等），否则启动失败报错Failed to launch chrome! - 生成大文件或并发高时内存易暴涨，建议限制并发数、设置
timeout、并用page.close()及时释放实例
别把 HTML 当 Word 用：导出 DOCX 不推荐
HTML 导出为 DOCX 是个陷阱。虽然有 docxtemplater 或 mammoth 等库，但它们本质是解析 HTML 标签映射到 Word 样式，对复杂布局（Flex/Grid/绝对定位）、内联样式、CSS 类名、自定义字体几乎无能为力。
立即学习“前端免费学习笔记（深入）”；
- 如果只是导出纯文本报告，可用
FileSaver.js+blob生成.doc（老格式），但现代 Word 打开会提示兼容模式，样式全丢 - 真要交付 Word 文档，正确路径是：服务端用
docxgenjs或 Python 的python-docx，基于模板填充数据，而非从 HTML “转换” - 任何声称“一键 HTML 转 DOCX 保样式”的前端方案，实际都只适用于最简单的段落+表格，上线前务必用真实业务 HTML 多轮验证
导出 PDF 看似简单，但“看起来一样”和“真的能用”之间差了一堆 CSS 渲染细节、字体嵌入、分页逻辑和跨环境兼容问题。最容易被忽略的是：打印样式表（@media print）没写，或用了仅在屏幕生效的单位（如 vh），结果 PDF 里内容错位或消失。
