本文介绍使用 html2pdf.js 在 angularjs 应用中精准导出结构化、样式可控的 pdf，支持自定义页边距、a4 尺寸、高清图像渲染及跨域资源处理，避免 html2canvas 直接截屏导致的布局失真问题。
本文介绍使用 html2pdf.js 在 angularjs 应用中精准导出结构化、样式可控的 pdf，支持自定义页边距、a4 尺寸、高清图像渲染及跨域资源处理，避免 html2canvas 直接截屏导致的布局失真问题。
在 AngularJS 项目中实现「按设计稿定制 PDF」而非简单截图，关键在于将语义化 HTML 结构（而非整个视图）作为 PDF 内容源，并通过配置精细控制渲染效果。推荐使用 html2pdf.js —— 它是 jsPDF 与 html2canvas 的封装增强方案，专为高质量 HTML→PDF 转换优化，完美适配 AngularJS 的 DOM 操作习惯。
✅ 正确实践：按需选取 DOM 节点 + 配置驱动渲染
首先确保已引入依赖（建议通过 CDN 或 npm 安装）：
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/2.4.0/html2pdf.bundle.min.js"></script>
在控制器中绑定下载逻辑（例如 DownloadCtrl）：
$scope.downloadAsPdf = function() {
// 精准定位待导出区域（推荐使用唯一 ID，避免多匹配）
const exportSection = document.getElementById('pdf-content-area');
if (!exportSection) {
console.warn('PDF source element not found!');
return;
}
const options = {
margin: [12, 5, 12, 5], // [top, left, bottom, right] 单位：mm
filename: 'custom-report-' + new Date().toISOString().slice(0,10) + '.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
dpi: 192, // 提升图像清晰度（默认 96）
scale: 2, // 高分辨率缩放（推荐 2，兼顾性能与质量）
letterRendering: true,
useCORS: true, // 必须启用，否则 Blob 图片/跨域资源无法加载
logging: false
},
jsPDF: {
unit: 'mm',
format: 'a4',
orientation: 'portrait'
},
pagebreak: {
mode: ['css', 'legacy'],
before: '.page-break-before' // 可选：为特定元素添加 class="page-break-before" 强制分页
}
};
// 执行导出（链式调用，自动处理渲染与保存）
html2pdf()
.from(exportSection)
.set(options)
.save();
};对应 HTML 模板中，需明确标记导出区域（含内联或外部 CSS 样式）：
<!-- 使用独立 ID 区隔内容，避免样式污染 -->
<div id="pdf-content-area" style="font-family: 'Helvetica', sans-serif; max-width: 210mm; margin: 0 auto;">
<h1 style="color: #2c3e50; text-align: center;">定制报告</h1>
<div style="display: flex; justify-content: space-between; margin: 10mm 0;">
<img ng-src="{{logoBlobUrl}}" width="120" height="60" style="object-fit: contain;" />
<span>日期：{{::reportDate}}</span>
</div>
<table style="width: 100%; border-collapse: collapse; margin-top: 15px;">
<tr style="background-color: #3498db; color: white;">
<th style="padding: 8px; text-align: left;">项目</th>
<th style="padding: 8px; text-align: right;">金额</th>
</tr>
<tr ng-repeat="item in reportData">
<td style="padding: 6px 8px; border-bottom: 1px solid #eee;">{{item.name}}</td>
<td style="padding: 6px 8px; text-align: right; border-bottom: 1px solid #eee;">¥{{item.value | number:2}}</td>
</tr>
</table>
</div>
<button ng-click="downloadAsPdf()" class="btn btn-primary">下载 PDF</button>⚠️ 关键注意事项
- 图片资源必须可跨域访问：Blob URL 需设置 useCORS: true，且后端响应头应包含 Access-Control-Allow-Origin: *（或指定域名）；
- 避免 AngularJS 动态指令干扰：html2pdf 渲染时 Angular 已完成编译，但复杂指令（如 ng-if 嵌套过深）可能导致 DOM 不稳定，建议导出前用 $scope.$digest() 确保视图同步；
- 字体限制：浏览器默认字体（如 Helvetica）可直接使用；若需自定义字体（如中文思源黑体），需提前通过 jsPDF.addFont() 注入并配置 html2canvas.fontFamily（需额外处理 Base64 字体）；
- 性能优化：对长列表使用 virtual-scroll 或分页渲染，避免单页 DOM 过大导致 html2canvas 内存溢出；
- 兼容性：html2pdf.js 支持 IE11+，但 IE 下 useCORS 对 Blob 支持有限，生产环境建议提示用户使用 Chrome/Firefox/Edge。
通过以上方式，你不再依赖“截图式”PDF，而是真正构建一份结构清晰、样式可控、语义明确的 PDF 报告——完全匹配设计稿要求，且便于后续维护与扩展。
