本文详解在 Angular 项目中使用 jsPDF 将 SVG 元素渲染到 PDF 的两种可靠方式：推荐使用 addSvgAsImage() 异步方法，或通过 Canvas 中转实现 addImage() 兼容方案，并强调必需的 SVG 命名空间与异步处理要点。
本文详解在 angular 项目中使用 jspdf 将 svg 元素渲染到 pdf 的两种可靠方式：推荐使用 `addsvgasimage()` 异步方法，或通过 canvas 中转实现 `addimage()` 兼容方案，并强调必需的 svg 命名空间与异步处理要点。
在 Angular 应用中将 SVG 动态插入 PDF 是常见需求（如导出图表、徽标或自定义图形），但直接使用 doc.addImage() 处理 base64 编码的 SVG 字符串会失败——根本原因在于：SVG 不是原生支持的图像格式（如 JPEG/PNG），且缺失 XML 命名空间会导致解析失败。
✅ 正确做法一：使用 addSvgAsImage()（推荐，简洁高效）
该方法由 jsPDF SVG 插件提供，专为 SVG 渲染设计，支持原生矢量保真输出。需确保已安装并导入 SVG 插件：
npm install jspdf @types/jspdf # 注意：jsPDF v2.5+ 已内置 SVG 支持，无需额外插件
import { jsPDF } from 'jspdf';
// ✅ 必须包含 xmlns 命名空间！
const svgContent = `
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle></svg>
`;
const doc = new jsPDF();
// ⚠️ 此为 Promise 方法，务必 await 或 .then()
await doc.addSvgAsImage(svgContent, 10, 20, 100, 100); // x, y, width, height
doc.save('svg-export.pdf');
✅ 正确做法二：Canvas 中转 + addImage()（兼容旧版或复杂场景）
当需统一使用 addImage()、或需对 SVG 进行预处理（如缩放、滤镜）时，可先绘制到
const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">...`;
const svgData = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgContent)));
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;
const img = new Image();
img.onload = () => {
ctx?.drawImage(img, 0, 0);
const jpegData = canvas.toDataURL('image/jpeg', 0.95); // 推荐 JPEG 以减小体积
const doc = new jsPDF();
doc.addImage(jpegData, 'JPEG', 10, 20, 100, 100);
doc.save('svg-via-canvas.pdf');
};
img.src = svgData;</svg>
⚠️ 关键注意事项：
- 命名空间不可省略：
- 异步必须处理：addSvgAsImage() 返回 Promise，未 await 会导致 PDF 生成为空或报错；
- Angular 环境适配：若在服务（Service）中调用，确保 DOM 操作在浏览器环境执行（避免 SSR 报错），可加 if (typeof window !== 'undefined') 守卫；
- 性能提示：矢量渲染（addSvgAsImage）更清晰、文件更小；Canvas 方案会转为位图，放大可能失真。
总结：优先选用 addSvgAsImage() 并严格校验 SVG 字符串结构，既保证矢量质量，又简化代码逻辑。对于复杂交互式 SVG，建议结合 @angular/platform-browser 的 DomSanitizer 安全注入，再提取 outerHTML 作为源内容。
