本文介绍使用 html2pdf.js 在 angularjs 应用中实现点击按钮导出高度定制化 pdf 的完整方案，支持精确控制页边距、图片渲染、跨域资源加载及 a4 页面布局，避免 html2canvas 直接截取视图的局限性。
本文介绍使用 html2pdf.js 在 angularjs 应用中实现点击按钮导出高度定制化 pdf 的完整方案，支持精确控制页边距、图片渲染、跨域资源加载及 a4 页面布局，避免 html2canvas 直接截取视图的局限性。
在 AngularJS 项目中生成符合业务设计规范的 PDF（如带 Logo、表格、签名区、固定页眉页脚等），不应依赖“截图式”导出（如仅用 html2canvas + jsPDF 渲染当前 DOM 视图），而应采用语义化内容容器 + 配置驱动渲染的方式——即预先构建一个隐藏但结构完整、样式精准的 PDF 专用 HTML 模板，再通过 html2pdf.js 将其高质量转换为 PDF。
✅ 推荐方案：使用 html2pdf.js（jsPDF + html2canvas 封装库）
html2pdf.js 是轻量、稳定且配置灵活的解决方案，完美兼容 AngularJS（无需修改框架逻辑），支持 CSS 分页、跨域图片加载、DPI 缩放与 PDF 元信息设置。
1. 安装与引入
# 使用 CDN（推荐开发/简单部署） <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
⚠️ 注意：AngularJS 不支持 ES6 模块语法，务必使用 .bundle.min.js 版本（已内置 jsPDF + html2canvas）。
Json Schema Toolkit下载使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
2. 构建专用 PDF 模板（隐藏但语义清晰）
在控制器对应视图中添加一个独立、无交互、纯静态结构的 <div>，专用于 PDF 渲染（例如 id="pdf-content"）：
<!-- 此 div 不显示在页面上，仅作 PDF 数据源 -->
<div id="pdf-content" style="display:none; width:210mm; padding:12mm; font-family: 'Segoe UI', sans-serif;">
<header style="text-align:center; margin-bottom:20px;">
<img src="https://your-blob-storage/logo.png" width="120" height="40" style="object-fit:contain;" />
<h2 style="margin:12px 0 6px; color:#2c3e50;">客户结算单</h2>
<p style="color:#7f8c8d; font-size:14px;">生成时间：{{::reportDate | date:'yyyy-MM-dd HH:mm'}}</p>
</header>
<section style="margin:24px 0;">
<table style="width:100%; border-collapse:collapse; font-size:13px;">
<thead>
<tr style="background:#3498db; color:white;">
<th style="padding:8px; text-align:left;">项目</th>
<th style="padding:8px; text-align:right;">金额（元）</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in reportItems">
<td style="padding:6px 8px; border-bottom:1px solid #ecf0f1;">{{item.name}}</td>
<td style="padding:6px 8px; text-align:right; border-bottom:1px solid #ecf0f1;">{{item.amount | number:2}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td style="padding:10px 8px; font-weight:bold;">总计</td>
<td style="padding:10px 8px; text-align:right; font-weight:bold; color:#e74c3c;">
{{reportItems | sum:'amount' | number:2}}
</td>
</tr>
</tfoot>
</table>
</section>
<footer style="margin-top:30px; font-size:12px; color:#95a5a6; text-align:center;">
<p>© {{::currentYear}} 公司版权所有｜联系方式：service@company.com</p>
</footer>
</div>✅ 关键设计原则：
- 使用内联样式（html2pdf 对外部 CSS 文件/<style> 标签支持不稳定）；
- 显式设置 width 和 padding 匹配 A4 尺寸（210mm × 297mm）；
- 图片 src 必须支持 CORS（Blob URL 或服务端开启 Access-Control-Allow-Origin）；
- 使用 ng-repeat 和 {{}} 插值确保 AngularJS 数据绑定生效（注意：需在 $scope 数据就绪后再触发导出）。
3. 在 Controller 中绑定下载逻辑
$scope.downloadAsPDF = function() {
// 确保数据已渲染完成（尤其含异步图片时）
$timeout(function() {
const element = document.getElementById('pdf-content');
// 高质量导出配置
const opt = {
margin: [12, 5, 12, 5], // top, left, bottom, right (mm)
filename: '结算单_' + new Date().toISOString().slice(0,10) + '.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
dpi: 192,
scale: 2, // 提升清晰度（避免模糊）
letterRendering: true,
useCORS: true, // 关键：允许加载跨域图片（如 Blob Storage）
logging: false
},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
pagebreak: { mode: ['css', 'legacy'] } // 支持 `page-break-after: always`
};
// 执行导出（自动触发下载）
html2pdf().from(element).set(opt).toPdf().save();
}, 100); // 微延迟确保 DOM 渲染完成
};⚠️ 常见问题与注意事项
- 图片不显示？ → 检查 Blob URL 是否带 blob: 协议；若为后端签名 URL，需服务端响应头包含 Access-Control-Allow-Origin: *；
- 中文乱码？ → html2pdf 默认不支持中文字体，可预加载字体（进阶）或改用 jsPDF.addFileToVFS() + addFont()（需额外处理）；
- 分页错乱？ → 在模板中对长内容容器添加 style="page-break-inside: avoid;"，或用 <div style="page-break-after: always;"></div> 强制分页；
- AngularJS 插值未生效？ → 确保调用 downloadAsPDF 时 $scope 数据已存在，避免在 $http 回调外直接调用（可结合 $scope.$apply() 安全触发）。
✅ 总结
html2pdf.js 是 AngularJS 环境下构建定制 PDF 的成熟选择：它将「内容结构」与「渲染逻辑」解耦，让你专注设计 HTML 模板（复用 CSS/Bootstrap 类），再通过声明式配置输出专业 PDF。相比纯 jsPDF 手动绘图，开发效率高、维护成本低、视觉一致性好——真正实现“所见即所得”的 PDF 生成体验。
