本文介绍如何在 angularjs 应用中脱离“截图式导出”，精准控制 pdf 内容布局、样式与资源（如 blob 图片），使用 html2pdf.js 实现结构化、可定制的 pdf 生成。
本文介绍如何在 angularjs 应用中脱离“截图式导出”，精准控制 pdf 内容布局、样式与资源（如 blob 图片），使用 html2pdf.js 实现结构化、可定制的 pdf 生成。
在 AngularJS 项目中生成符合业务需求的 PDF（如带 Logo、分栏表格、动态图片、页眉页脚等），仅依赖 jsPDF 原生 API 编码成本高、维护困难；而直接用 html2canvas + jsPDF 截取整个视图，又难以规避导航栏、按钮等无关元素，且样式失真、图片加载失败风险高。更优解是：将待导出内容封装为独立、隐藏的 DOM 容器（如 <div id="pdf-content">），再通过 html2pdf.js 进行语义化渲染——它底层整合了 html2canvas 与 jsPDF，支持 CSS 媒体查询（@media print）、分页控制、自定义尺寸与图像质量。
✅ 推荐方案：html2pdf.js（轻量、稳定、AngularJS 友好）
首先安装依赖（推荐 CDN 或 script 标签引入，避免 Webpack 构建冲突）：
<!-- 在 index.html 或模板底部引入 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/2.4.0/html2pdf.bundle.min.js"></script>
在控制器中绑定下载逻辑（注意：确保目标 DOM 已渲染完成）：
// AngularJS controller 示例
app.controller('PdfExportCtrl', ['$scope', '$timeout', function($scope, $timeout) {
$scope.downloadPdf = function() {
// 确保 AngularJS 数据已绑定到 DOM（尤其含 ng-repeat 的动态内容）
$timeout(function() {
const element = document.getElementById('pdf-content'); // ✅ 推荐用 ID 精准定位
if (!element) {
console.warn('PDF content container not found!');
return;
}
const options = {
margin: [15, 10, 15, 10], // [top, left, bottom, right] 单位：mm
filename: 'report-' + new Date().toISOString().slice(0,10) + '.pdf',
image: { type: 'jpeg', quality: 0.95 },
html2canvas: {
dpi: 192,
scale: 2, // 提升清晰度（避免模糊）
useCORS: true, // 必须启用，否则 Blob 图片跨域加载失败
logging: false
},
jsPDF: {
unit: 'mm',
format: 'a4',
orientation: 'portrait'
},
pagebreak: { mode: ['avoid-all', 'css'] } // 避免在表格/标题中间断页
};
html2pdf().from(element).set(options).save();
}, 100); // 微延迟确保 DOM 渲染完成
};
}]);? 关键 HTML 结构建议（含样式与图片处理）
<!-- 隐藏但保留渲染的 PDF 专用容器 -->
<div id="pdf-content" style="display:none; width:210mm; padding:15mm; font-family: 'Helvetica', sans-serif;">
<!-- 页眉 -->
<div style="text-align:center; margin-bottom:10mm;">
<img ng-src="{{logoUrl}}" alt="Logo" style="height:24px; max-width:100%;">
<h2 style="margin-top:8px; color:#2c3e50;">销售报表</h2>
</div>
<!-- 主体内容（支持 AngularJS 表达式） -->
<table style="width:100%; border-collapse:collapse;">
<thead>
<tr style="background:#3498db; color:white;">
<th style="padding:6px; text-align:left;">产品</th>
<th style="padding:6px; text-align:right;">数量</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in reportData" style="border-bottom:1px solid #eee;">
<td style="padding:6px;">{{item.name}}</td>
<td style="padding:6px; text-align:right;">{{item.qty}}</td>
</tr>
</tbody>
</table>
<!-- Blob 图片示例（需预加载） -->
<div style="margin-top:15mm;">
<h3>趋势图表</h3>
<img ng-src="{{chartBlobUrl}}" style="max-width:100%; height:auto;" />
</div>
</div>
<!-- 触发按钮 -->
<button ng-click="downloadPdf()" class="btn btn-primary">? 导出 PDF</button>⚠️ 注意事项与最佳实践
- 图片加载保障：Blob URL（如 URL.createObjectURL(blob)）必须在 PDF 生成前已赋值给 <img> 的 ng-src，且 useCORS: true 是必需项；
- 样式隔离：PDF 容器内禁用全局 CSS 干扰，推荐内联样式或 <style> 标签嵌入（html2pdf 支持部分 CSS）；
- 分页控制：为防止表格跨页断裂，在关键元素上添加 style="page-break-inside: avoid;"；
- 字体兼容性：中文需引入 Web Font 或转为图片，html2pdf 默认不支持自定义字体嵌入；
- 性能优化：复杂内容可先调用 .output('dataurlnewtab') 预览，确认效果后再 .save()。
通过此方案，你不再受限于“页面快照”，而是真正掌控 PDF 的每一寸布局——从页边距、字体大小到图片分辨率，全部可编程定义，完美匹配设计稿（如题中所示的整洁报表格式）。
