最简单可靠的方式是浏览器原生打印（Ctrl+P），window.print()需用户点击触发；html2canvas+jsPDF易出错，服务端生成更稳定但需注意权限与渲染一致性。
直接用浏览器打印功能（Ctrl+P / Cmd+P）是最简单、兼容性最好的方式，无需写代码、不依赖第三方服务，90% 的静态 HTML 页面都能导出为可用的 PDF。
为什么不用 window.print() 自动触发？
虽然 JS 可以调用 window.print() 弹出打印对话框，但它无法绕过用户确认，也不能指定保存路径或文件名；更重要的是，多数浏览器（尤其是 Chrome）在无用户手势（如 click）上下文中会静默忽略该调用。实际项目中强行自动触发往往失败。
- 必须由用户显式点击按钮才能调用
window.print() - 打印前建议用
@media printCSS 隐藏无关元素（如导航栏、按钮） - 避免在
@media print中使用display: none隐藏含绝对定位或 transform 的元素，可能导致内容错位
html2canvas + jsPDF 的常见翻车点
这套组合适合需要精确截图导出的场景（比如带 Canvas 图表、自定义字体渲染），但极易出问题：
-
html2canvas无法捕获跨域图片、iframe内容、position: fixed元素（常被截断） -
中文乱码：默认不支持中文字体，需手动加载
font并用jsPDF.setFont()设置，否则显示方块 - 页面过长时，
html2canvas可能因内存不足崩溃，建议分页截取再拼接
const element = document.getElementById('content');
html2canvas(element, { useCORS: true, scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a4');
const width = pdf.internal.pageSize.getWidth();
const height = (canvas.height * width) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, width, height);
pdf.save('page.pdf');
});服务端生成更可靠，但要注意请求链路
如果页面含动态数据、权限校验或需统一水印/页眉页脚，应交由后端生成 PDF（如 Node.js 用 puppeteer，Python 用 WeasyPrint 或 pdfkit）。关键不是“能不能”，而是“谁该负责”：
立即学习“前端免费学习笔记（深入）”；
-
前端发请求时，URL 必须携带完整认证信息（如
Authorizationheader 或有效 cookie），否则 puppeteer 渲染空白页 - 避免在服务端直接渲染用户未授权访问的页面，防止越权导出
- WeasyPrint 对 Flex/Grid 支持较弱，复杂布局建议用 Puppeteer（基于 Chromium，渲染最接近真实浏览器）
真正难的从来不是“怎么导出”，而是“导出的内容是否和用户看到的一致”——CSS 分页、字体嵌入、表格跨页断裂、固定页眉这些细节，几乎每个项目都会卡住一两天。别迷信一键方案，先用打印预览看效果，再决定要不要上工具链。
