PDF 里的图表、示意图交给前端使用时，常见做法是先渲染成 PNG——位图放大就发虚，换个分辨率还得重新截。网页插图、矢量图标、印刷排版这些要任意缩放的地方，要的其实是 SVG。

本文用 Spire.PDF for JavaScript 实现将 PDF 转换为 SVG。它基于 WebAssembly 在浏览器端加载与保存 PDF 文档，转换全过程在本地完成，通过虚拟文件系统（VFS）读写文件，无需后端配合。输出有两种形态：整份文档合成一个 SVG，或者每页各自成一个 SVG。

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

• 将整份 PDF 转换为单个 SVG
• 将 PDF 每一页转换为独立的 SVG

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

将整份 PDF 转换为单个 SVG

Spire.PDF for JavaScript 提供 PdfDocument.ConvertOptions.OutputToOneSvg 属性，用于决定整份文档输出到一个 SVG 还是每页各一个。它默认为 false，也就是每页单独成文件；设为 true 后各页按原顺序纵向排进同一张画布，再交给 SaveToFile 指定 FileFormat.SVG 写出。

具体操作步骤如下：

1. 获取 Spire.PDF 的 WASM 模块，确认已就绪。
2. 读入示例 PDF 与 Arial 字体，创建 PdfDocument 对象并加载该文件。
3. 将 PdfDocument.ConvertOptions.OutputToOneSvg 设为 true，让所有页面输出到同一个 SVG。
4. 使用 PdfDocument.SaveToFile() 方法保存结果文件。
5. 从 VFS 读出结果文件并触发浏览器下载。

将整份 PDF 转换为单个 SVG 的代码如下：

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

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

    // 转 SVG 要还原页面文字，先把 Arial 字体放进虚拟文件系统的字体目录
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // 将待转换的 PDF 载入 VFS
    const inputFileName = '章节文档.pdf';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);

    // 输出文件名：整份文档合成一个 SVG
    const outputFileName = '章节文档.svg';

    // 加载 PDF，并让所有页面输出到同一个 SVG
    let doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(https://cdn.e-iceblue.cn/inputFileName);
    doc.ConvertOptions.OutputToOneSvg = true;
    doc.SaveToFile(outputFileName, pdfModule.FileFormat.SVG);
    doc.Close();

    // 从 VFS 读取生成的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'image/svg+xml' });
    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>将 PDF 转换为 SVG</h1>
      <button onClick={convertPdfToOneSvg}>
        转换为单个 SVG
      </button>
    </div>
  );
}

export default App;

转换结果是一个 SVG 文件，五页内容上下相接：

将 PDF 每一页转换为独立的 SVG

Spire.PDF for JavaScript 还提供 PdfToSvgConverter 转换器，用于把文档逐页转成 SVG。它与 PdfDocument 是两条等价入口，SvgOptions 里也有 OutputToOneSvg，本节保持默认的逐页输出，取出后逐个下载。

具体操作步骤如下：

1. 获取 Spire.PDF 的 WASM 模块，确认已就绪。
2. 读入示例 PDF 与 Arial 字体。
3. 创建 PdfToSvgConverter 对象，传入待转换的 PDF 路径。
4. 使用 PdfToSvgConverter.Convert() 方法逐页转换，每页一个 SVG 文件。
5. 从 VFS 取出每一页的文件并逐个触发浏览器下载。

将 PDF 每一页转换为独立 SVG 的代码如下：

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

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

    // 转 SVG 要还原页面文字，先把 Arial 字体放进虚拟文件系统的字体目录
    await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

    // 将待转换的 PDF 载入 VFS
    const inputFileName = '章节文档.pdf';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);

    // 输出文件名的前缀：每页会写成 章节文档_1.svg、章节文档_2.svg …
    const outputFileName = '章节文档.svg';

    // 用转换器逐页转换
    const converter = new pdfModule.PdfToSvgConverter(inputFileName);
    converter.Convert(outputFileName);

    // 从 VFS 取出每一页的文件，逐个触发下载
    const fs = window.dotnetRuntime.Module.FS;
    const prefix = outputFileName.replace(/\.svg$/i, '_');
    const pageFiles = fs.readdir('/').filter((name) => name.startsWith(prefix) && name.endsWith('.svg'));

    for (const pageFile of pageFiles) {
      const blob = new Blob([fs.readFile(pageFile)], { type: 'image/svg+xml' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = pageFile;
      a.click();
      URL.revokeObjectURL(url);
    }
  };

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

export default App;

每一页各生成一个 SVG 文件，文件名带页码：

设置 SVG 的尺寸

另外转换器还提供 SvgOptions.ScaleX 与 ScaleY 属性支持按倍数缩放输出尺寸，两者都默认为 1。设置为2即表示放大2倍，SVG内容是矢量的，不会像位图那样放大会发虚：

// 输出尺寸放大到 2 倍
const converter = new pdfModule.PdfToSvgConverter('章节文档.pdf');
converter.SvgOptions.ScaleX = 2;
converter.SvgOptions.ScaleY = 2;
converter.Convert('章节文档.svg');

常见问题

为什么输出的不是一个 .svg，而是一堆 xxx_1.svg、xxx_2.svg

原因：PdfDocument.SaveToFile 转 SVG 时按页写出，ConvertOptions.OutputToOneSvg 默认是 false，于是文件名变成「前缀_页码.svg」。只放一页的 PDF 看不出差别，页数一多就显出来了。

解决：需要单个文件时，在保存前打开这个属性：

doc.ConvertOptions.OutputToOneSvg = true;
doc.SaveToFile('章节文档.svg', pdfModule.FileFormat.SVG);

用 PdfToSvgConverter 时对应的是 converter.SvgOptions.OutputToOneSvg——两个入口的这个开关是等价的，产物一致。

报 Cannot found font(Arial) installed on the system. 怎么解决

原因：转 SVG 要把页面文字还原成 <text> 元素，转换器在虚拟文件系统的 /Library/Fonts/ 里按字体名查找，目录是空的就会抛这个错。

解决：在 LoadFromFile 之前把字体送进 VFS：

await window.spire.FetchFileToVFS('ARIAL.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);

Arial 与 Arial Unicode MS 是两个文件，只放后者仍会报同一个错。

转换后的 SVG 里，文字还能选中吗

原因：<text> 与描边路径是两回事。转换器把页面文字保留为 <text> 元素，图形和线条才转成矢量路径（<path>），所以文字的可选中、可搜索特性没有丢。

解决：不用额外设置。生成的 SVG 用编辑器打开，能看到 <text> 节点；放进浏览器里缩放，文字和线条都不会发虚。

只转换其中几页怎么办

原因：SaveToFile 还有一个带页码范围的重载，处理的仍是保存在 VFS 里、逐页输出的那一套文件。

解决：把起止页索引传进去，索引从 0 起、含结束页：

// 只写出第 1、2 页，得到 前两页_1.svg、前两页_2.svg
doc.SaveToFile('前两页.svg', 0, 1, pdfModule.FileFormat.SVG);

获取免费许可证

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