本文介绍如何在 angularjs 应用中脱离“截图式导出”，精准控制 pdf 内容布局、样式与资源（如 blob 图片），使用 html2pdf.js 实现结构化、可定制的 pdf 生成。
本文介绍如何在 angularjs 应用中脱离“截图式导出”，精准控制 pdf 内容布局、样式与资源（如 blob 图片），使用 html2pdf.js 实现结构化、可定制的 pdf 生成。
在 AngularJS 项目中生成符合业务需求的 PDF（如带 Logo、分栏表格、动态图片、页眉页脚等），仅依赖 jsPDF 原生 API 编码成本高、维护困难；而直接用 html2canvas + jsPDF 截取整个视图，又难以规避导航栏、按钮等无关元素，且样式失真、图片加载失败风险高。更优解是：将待导出内容封装为独立、隐藏的 DOM 容器（如 首先安装依赖（推荐 CDN 或 script 标签引入，避免 Webpack 构建冲突）： 在控制器中绑定下载逻辑（注意：确保目标 DOM 已渲染完成）： 通过此方案，你不再受限于“页面快照”，而是真正掌控 PDF 的每一寸布局——从页边距、字体大小到图片分辨率，全部可编程定义，完美匹配设计稿（如题中所示的整洁报表格式）。✅ 推荐方案：html2pdf.js（轻量、稳定、AngularJS 友好）
<!-- 在 index.html 或模板底部引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/2.4.0/html2pdf.bundle.min.js"></script>
// 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;">
@@##@@
<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>
@@##@@
</div>
</div>
<!-- 触发按钮 -->
<button ng-click="downloadPdf()" class="btn btn-primary">? 导出 PDF</button>
⚠️ 注意事项与最佳实践
的 ng-src，且 useCORS: true 是必需项；
