网页上导出的图表、流程图、logo 多半是 SVG，等要打印、归档或走审批流时又要求 PDF。在办公软件里一份份另存得有人守着，放到服务端批量转，文件又得先上传。

本文用 Spire.PDF for JavaScript 处理 SVG 与 PDF 的衔接。它基于 WebAssembly 在浏览器端加载与保存文档，通过虚拟文件系统（VFS）读写文件，无需后端配合。两条路径：把 SVG 单独转成一个 PDF 文件，或者把 SVG 当作矢量图形画到已有 PDF 的指定页面上。

本文介绍两个核心功能点：

• 将 SVG 转换为 PDF
• 将 SVG 插入到已有 PDF 中

有关安装和项目配置，请参考 React 项目中集成 Spire.PDF for JavaScript。以下示例默认已安装 Spire.PDF 并完成 WebAssembly 模块初始化。

将 SVG 转换为 PDF

Spire.PDF for JavaScript 提供 PdfDocument.LoadFromSvg 方法，用于把一份 SVG 载入成 PDF 文档。载入后文档里只有一页，页面尺寸取自 SVG 根元素上的 width/height。

具体操作步骤如下：

1. 获取 Spire.PDF 的 WASM 模块，确认已就绪。
2. 将 SVG 文件读入虚拟文件系统（VFS）。
3. 创建 PdfDocument 对象，使用 LoadFromSvg() 方法载入 SVG。
4. 使用 PdfDocument.SaveToFile() 方法保存结果文件。
5. 从 VFS 读出结果文件并触发浏览器下载。

将 SVG 转换为 PDF 的代码如下：

function App() {
  const convertSvgToPdf = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

    // 检查模块是否就绪
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // 将待转换的 SVG 载入 VFS
    const inputFileName = '矢量图表.svg';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);

    // 载入 SVG：文档里只有一页，尺寸与 SVG 一致
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromSvg({ fileName: inputFileName });

    // 保存结果文件
    const outputFileName = '矢量图表.pdf';
    doc.SaveToFile(outputFileName);
    doc.Close();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>将 SVG 转换为 PDF</h1>
      <button onClick={convertSvgToPdf}>
        转换为 PDF
      </button>
    </div>
  );
}

export default App;

转换得到的是一个单页 PDF，页面尺寸与 SVG 相同：

将 SVG 插入到已有 PDF 中

Spire.PDF for JavaScript 还提供 PdfPageBase.CreateTemplate 方法与 PdfCanvas.DrawTemplate 方法，用于把 SVG 叠到已经排好版的 PDF 上。先载入 SVG，把它的一页做成模板，再指定位置与尺寸画到目标页上——原文档的页数、页面尺寸和已有内容都不受影响。

具体操作步骤如下：

1. 获取 Spire.PDF 的 WASM 模块，确认已就绪。
2. 将已有 PDF 与 SVG 徽标读入虚拟文件系统（VFS）。
3. 分别创建 PdfDocument 对象并载入已有 PDF、SVG 各一份。
4. 使用 CreateTemplate() 方法把 SVG 首页做成模板，再用 Canvas.DrawTemplate() 方法按位置与尺寸画到目标页。
5. 使用 SaveToFile() 方法保存被绘制的 PDF，再从 VFS 读出结果文件并触发浏览器下载。

将 SVG 插入到已有 PDF 中的代码如下：

function App() {
  const drawSvgOnPdf = async () => {
    // 获取 Spire.PDF WASM 模块
    const pdfModule = window.wasmModule?.spirepdf;

    // 检查模块是否就绪
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // 已有 PDF 与 SVG 徽标都载入 VFS
    const pdfFileName = '产品说明.pdf';
    const svgFileName = '矢量徽标.svg';
    await window.spire.FetchFileToVFS(pdfFileName, '', `${process.env.PUBLIC_URL}/data/`);
    await window.spire.FetchFileToVFS(svgFileName, '', `${process.env.PUBLIC_URL}/data/`);

    // 载入已有 PDF
    let existingPdf = new pdfModule.PdfDocument();
    existingPdf.LoadFromFile(pdfFileName);

    // 载入 SVG，把它的一页做成模板
    let svgDoc = new pdfModule.PdfDocument();
    svgDoc.LoadFromSvg({ fileName: svgFileName });
    const template = svgDoc.Pages.get_Item(0).CreateTemplate();

    // 在第 1 页画出模板：位置与尺寸都以磅为单位，原点在页面左上角
    const location = new pdfModule.PointF(390, 50);
    const size = new pdfModule.SizeF(130, 60);
    existingPdf.Pages.get_Item(0).Canvas.DrawTemplate({ template, location, size });

    // 保存被绘制的 PDF
    const outputFileName = '产品说明_带徽标.pdf';
    existingPdf.SaveToFile(outputFileName);
    svgDoc.Close();
    existingPdf.Close();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>将 SVG 插入到已有 PDF 中</h1>
      <button onClick={drawSvgOnPdf}>
        插入 SVG
      </button>
    </div>
  );
}

export default App;

原说明书内容未变，右上角多出了一个矢量徽标：

常见问题

输出的 PDF 尺寸为什么不是 A4

原因：LoadFromSvg 建页时按 SVG 根元素的 width/height 取值，像素按 75% 折算成磅。示例里 760 × 520 的 SVG，转出来就是 570 × 390 磅的一页，与 A4 无关。

解决：要换成别的尺寸，改 SVG 根元素上的 width、height 或 viewBox，再重新转换。

怎么把 SVG 画到其它页或其它位置

原因：DrawTemplate 画在哪一页由取页方式决定，画在哪一角由 location 决定，两者都由调用方显式传入。

解决：换页用 Pages.get_Item(index)（索引从 0 起），换位置改 PointF，改大小改 SizeF，单位都是磅、原点在页面左上角：

// 画到第 2 页左下角，尺寸 100 × 46 磅
existingPdf.Pages.get_Item(1).Canvas.DrawTemplate({
  template: template,
  location: new pdfModule.PointF(40, 760),
  size: new pdfModule.SizeF(100, 46),
});

插入的 SVG 是矢量图形还是位图

原因：CreateTemplate 取到的是 SVG 内容对应的 PDF 模板，DrawTemplate 按矢量方式把它画进页面，中间不经过位图。

解决：无需额外设置。插入后放大页面，徽标的边缘依然清晰，打印也不会发虚。

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。