本文详解在 Angular 中使用 jsPDF 将 SVG 内容高质量嵌入 PDF 的两种可靠方法：推荐的异步 addSvgAsImage() 和兼容性更强的 Canvas 渲染 + addImage() 方案，并提供可直接运行的代码示例与关键注意事项。
本文详解在 angular 中使用 jspdf 将 svg 内容高质量嵌入 pdf 的两种可靠方法：推荐的异步 `addsvgasimage()` 和兼容性更强的 canvas 渲染 + `addimage()` 方案，并提供可直接运行的代码示例与关键注意事项。
在 Angular 应用中将 SVG 动态导出为 PDF 是常见需求（如图表、流程图、自定义图标等），但直接使用 addImage() 处理 base64 编码的 SVG 字符串往往失败——根本原因在于：jsPDF 原生不支持直接解析 SVG data URL 为图像，且缺失 XML 命名空间会导致浏览器拒绝渲染。
✅ 推荐方案：使用 addSvgAsImage()（需 jsPDF v2.5.1+）
该方法专为 SVG 设计，自动处理命名空间、坐标系和矢量缩放，输出为高质量矢量图形（非栅格化），且保留清晰度。注意：它是 Promise 异步方法，必须配合 await 或 .then() 使用：
import { jsPDF } from 'jspdf';
// ✅ 正确：添加 SVG 命名空间并使用 addSvgAsImage
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" />
</svg>`;
const doc = new jsPDF();
await doc.addSvgAsImage(svgContent, 10, 20, 100, 100); // x, y, width, height (mm)
doc.save('svg-export.pdf');⚠️ 注意事项：
- 必须显式声明 xmlns="http://www.w3.org/2000/svg"，否则解析失败；
- addSvgAsImage 在旧版 jsPDF（<v2.5）中不可用，需升级：npm install jspdf@latest；
- Angular 环境下需确保 DOM 可访问（避免 SSR 报错），建议在 AfterViewInit 或用户触发事件中调用。
? 替代方案：Canvas 渲染 + addImage()（兼容低版本 jsPDF）
当无法升级或需精细控制栅格化参数时，可先将 SVG 绘制到 <canvas>，再转为 PNG/JPEG 导入 PDF：
const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">...`;
const svgData = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(svgContent).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode('0x' + p1)));
const canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
const ctx = canvas.getContext('2d')!;
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0);
const pdf = new jsPDF();
// 转为 JPEG 以减小体积（PNG 更保真但更大）
pdf.addImage(canvas.toDataURL('image/jpeg', 0.9), 'JPEG', 10, 20, 100, 100);
pdf.save('svg-canvas.pdf');
};
img.src = svgData;? 关键细节：
- btoa() 不支持 Unicode 字符，务必先 encodeURIComponent() 再 base64 编码；
- Canvas 尺寸应与 SVG 视口严格匹配，避免拉伸失真；
- toDataURL('image/jpeg') 的质量参数（0.9）可平衡清晰度与文件大小。
? 总结：优先选用 addSvgAsImage() 实现无损矢量导出；若需兼容性或特殊处理，Canvas 方案更灵活，但会损失矢量特性。无论哪种方式，XML 命名空间和异步流程控制都是成功导出的前提。
