将 Excel 工作表和图表导出为 SVG 矢量图形，能够以任意分辨率在网页上清晰呈现数据，同时保持文字的可选与可搜索性。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成此转换，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

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

• 工作表转 SVG
• 图表转 SVG

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

工作表转 SVG

工作表转 SVG 的核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标 Excel 文件载入 WASM 虚拟文件系统；然后实例化 Workbook 加载文件，获取目标工作表后调用 ToSVGStream 将工作表渲染为 SVG 并写入 Stream 对象；最后从 VFS 读取生成的 SVG 文件，封装为 Blob 后触发浏览器下载。

function App() {
  const sheetToSVG = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

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

    // 将字体和 Excel 文件载入 VFS
    await window.spire.FetchFileToVFS('arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'ImageHeaderFooter.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载工作簿，获取第一个工作表
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });
    const sheet = workbook.Worksheets.get(0);

    // 将工作表转换为 SVG 流
    const outputFileName = "Worksheet.svg";
    let fs = new xlsModule.Stream(outputFileName);
    sheet.ToSVGStream(fs, 0, 0, 0, 0);
    fs.Flush();
    fs.Dispose();

    // 从 VFS 读取转换后的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: "image/svg+xml;charset=utf-8"});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);

    // 释放资源
    workbook.Dispose();
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert Excel To SVG</h1>
      <button onClick={sheetToSVG}>
        Generate
      </button>
    </div>
  );
}

export default App;

工作表通过 ToSVGStream 转换后生成的 SVG 输出

图表转 SVG

图表工作表（ChartSheet）是一种特殊的工作表类型，其中包含嵌入式图表而非单元格数据。转换流程与工作表转 SVG 类似。

function App() {
  const chartsheetToSVG = async () => {
    // 获取 Spire.XLS WASM 模块
    const xlsModule = window.wasmModule?.spirexls;

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

    // 将字体和 Excel 文件载入 VFS
    await window.spire.FetchFileToVFS('arial.ttf', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'ChartSheet.xlsx';
    await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);

    // 加载工作簿
    const workbook = new xlsModule.Workbook();
    workbook.LoadFromFile({ fileName: inputFileName });

    // 按名称获取图表工作表
    let cs = workbook.GetChartSheetByName("Chart1");

    // 定义输出文件名
    const outputFileName = 'ChartSheetToSVG-out.svg';

    // 创建流，将图表工作表转换为 SVG
    const fs = new xlsModule.Stream(outputFileName);
    cs.ToSVGStream(fs, 0, 0, 0, 0);
    fs.Flush();

    // 从 VFS 读取转换后的文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: "image/svg+xml;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);

    // 释放资源
    workbook.Dispose();
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Convert Chartsheet To SVG</h1>
      <button onClick={chartsheetToSVG}>
        Generate
      </button>
    </div>
  );
}

export default App;

图表工作表通过 ToSVGStream 转换后生成的 SVG 输出

SVG vs PNG 对比

选择建议：在网页中嵌入报表或需要文字可选的场景优先使用 SVG；需要兼容图片编辑器或对接遗留系统的场景使用 PNG。

常见问题

SVG 文字缺失或乱码

原因：WASM 虚拟文件系统中缺少渲染所需的字体文件。ToSVGStream 渲染文本时需从 VFS 中读取字体，若未预加载则文字区域会留白或显示为乱码。

解决：转换前通过 FetchFileToVFS 将字体文件载入 VFS：

await window.spire.FetchFileToVFS(
  'ARIAL.TTF', '/Library/Fonts/', '/'
);

SVG 文件无法打开或提示损坏

原因：创建 Blob 时 MIME 类型设置错误，浏览器无法正确识别文件格式。

解决：确保使用准确的 SVG MIME 类型：

const blob = new Blob([data], {
  type: "image/svg+xml;charset=utf-8"
});

获取免费许可证

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