在NestJS/Node.js服务端用jsPDF添加SVG到PDF的方案咨询

jsPDF的addSvgAsImage等SVG相关方法依赖浏览器DOM环境（比如DOMParser、SVG渲染API），而NestJS运行在Node.js服务端，没有这些浏览器API，所以直接调用会失效。解决思路是先把SVG转换为图片格式（PNG/JPEG）的Buffer，再用你已实现的addImage函数插入PDF。以下是几种可行方案：

方案1：使用svg-to-png轻量转换 #

这个库专门用于SVG转PNG，适合简单SVG场景：

1. 安装依赖

npm install svg-to-png

2. 编写SVG转Buffer的工具函数

import { convert } from 'svg-to-png';
import { readFileSync, writeFileSync, unlinkSync } from 'fs';
import { join } from 'path';

async function svgToPngBuffer(svgString: string): Promise<Buffer> {
  const tempSvgPath = join(__dirname, 'temp.svg');
  // 写入临时SVG文件
  writeFileSync(tempSvgPath, svgString);
  // 转换为PNG
  const pngPaths = await convert(tempSvgPath, __dirname);
  // 读取PNG文件为Buffer
  const pngBuffer = readFileSync(pngPaths[0]);
  // 清理临时文件
  unlinkSync(tempSvgPath);
  unlinkSync(pngPaths[0]);
  return pngBuffer;
}

3. 整合到PDF生成逻辑

// 示例SVG字符串
const svgContent = `<svg width="200" height="200"><circle cx="100" cy="100" r="50" fill="red"/></svg>`;

// 转换为PNG Buffer
const pngBuffer = await svgToPngBuffer(svgContent);

// 调用你已有的addImage函数插入
this.addImage(pngBuffer, { x: 10, y: 10, width: 200, height: 200 });

方案2：使用sharp高性能转换 #

Sharp是服务端处理图片的高性能库，支持直接将SVG字符串转换为Buffer，无需临时文件，适合生产环境：

1. 安装依赖

npm install sharp

2. 编写转换函数

import sharp from 'sharp';

async function svgToImageBuffer(svgString: string, format: 'png' | 'jpeg' = 'png'): Promise<Buffer> {
  return sharp(Buffer.from(svgString))
    .toFormat(format)
    .toBuffer();
}

3. 调用示例

const svgContent = `<svg width="200" height="200"><circle cx="100" cy="100" r="50" fill="blue"/></svg>`;
const imageBuffer = await svgToImageBuffer(svgContent);

this.addImage(imageBuffer, { x: 10, y: 10, width: 200, height: 200 });

方案3：使用Puppeteer渲染复杂SVG #

如果SVG包含外部样式、自定义字体或复杂元素，轻量转换可能丢失样式，此时可以用Puppeteer启动无头Chrome渲染SVG：

1. 安装依赖

npm install puppeteer

2. 编写渲染函数

import puppeteer from 'puppeteer';

async function renderSvgToPngBuffer(svgString: string, width = 200, height = 200): Promise<Buffer> {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  await page.setViewport({ width, height });
  // 加载SVG内容并等待渲染完成
  await page.setContent(svgString, { waitUntil: 'networkidle0' });
  // 截图为Buffer
  const buffer = await page.screenshot({ type: 'png' });
  await browser.close();
  return buffer;
}

3. 调用示例

const complexSvg = `<svg width="300" height="300"><text x="50" y="50" font-family="Arial" font-size="24">Hello SVG</text></svg>`;
const pngBuffer = await renderSvgToPngBuffer(complexSvg, 300, 300);

this.addImage(pngBuffer, { x: 10, y: 10, width: 300, height: 300 });

内容的提问来源于stack exchange，提问作者Pulkit Raina