报表以图片形式分发时，接收方无需安装表格软件即可查看内容，图片也可以直接插入文档、聊天窗口或网页。转换需要保留表格的标题、底色、边框与数字格式，文字还要按原字体呈现，否则导出的图片会与工作簿中的样子相去甚远。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端完成工作表到图片的转换，字体与输入输出文件通过虚拟文件系统（VFS）管理，转换结果以 PNG 格式写出，无需后端服务支持。

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

• 将 Excel 工作表转换为图片
• 将指定单元格区域转换为图片

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

将 Excel 工作表转换为图片

把整张工作表导出为图片，可以将报表连同合并标题、表头配色与数字格式一起交给他人查看，收件方无需打开表格软件。导出范围取工作表的已用区域，超出该区域的空白行列不会进入图片；字体文件需要先载入虚拟文件系统，图片中的文字才会按原样呈现。

将 Excel 工作表转换为图片的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 把字体文件与 Excel 测试文件载入 VFS。
2. 用 new Workbook() 新建工作簿，再用 workbook.LoadFromFile 载入测试文件。
3. 调用 workbook.Worksheets.get(0) 取得第一张工作表。
4. 调用 sheet.ToImage，四个参数依次传入 sheet.FirstRow、sheet.FirstColumn、sheet.LastRow、sheet.LastColumn，把已用区域转换为图片对象。
5. 用 image.Save 写出 WorksheetToImage.png，再用 workbook.Dispose 释放 workbook 对象，从 VFS 读取图片并触发下载。

以下为完整的代码示例，演示如何在 React 中把 Excel 工作表转换为图片：

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

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

    // 将字体与测试数据文件载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'SalesDashboard.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);

    // 将工作表的已用区域转换为图片
    const image = sheet.ToImage(sheet.FirstRow, sheet.FirstColumn, sheet.LastRow, sheet.LastColumn);
    const outputFileName = 'WorksheetToImage.png';
    image.Save(outputFileName);

    // 释放 workbook 对象以释放资源
    workbook.Dispose();

    // 从 VFS 读取结果文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'image/png' });
    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>在 React 中将 Excel 转换为图片</h1>
      <button id="worksheet-to-image" onClick={worksheetToImage}>将工作表转换为图片</button>
    </div>
  );
}

export default App;

将工作表转换为图片后的 PNG 文件：

将指定单元格区域转换为图片

整张工作表导出后，图片中可能包含与本次分享无关的内容。只把某一块单元格区域转换为图片，可以让重点数据单独成图，图片尺寸也随区域大小收窄，适合嵌入邮件正文或文档的固定栏位。区域由起止行列坐标确定，行列序号从 1 开始，与表格中的行号列标一致。

将指定单元格区域转换为图片的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 把字体文件与 Excel 测试文件载入 VFS，再用 workbook.LoadFromFile 载入工作簿。
2. 调用 workbook.Worksheets.get(0) 取得第一张工作表。
3. 调用 sheet.ToImage，四个参数依次传入起始行 9、起始列 1、结束行 13、结束列 3，截取「重点区域明细」区块。
4. 用 image.Save 写出 RangeToImage.png。
5. 用 workbook.Dispose 释放 workbook 对象，再从 VFS 读取图片并触发下载。

以下为完整的代码示例，演示如何在 React 中把指定单元格区域转换为图片：

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

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

    // 将字体与测试数据文件载入 VFS
    await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'SalesDashboard.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);

    // 按起止行列截取单元格区域并转换为图片
    const image = sheet.ToImage(9, 1, 13, 3);
    const outputFileName = 'RangeToImage.png';
    image.Save(outputFileName);

    // 释放 workbook 对象以释放资源
    workbook.Dispose();

    // 从 VFS 读取结果文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'image/png' });
    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>在 React 中将 Excel 转换为图片</h1>
      <button id="range-to-image" onClick={rangeToImage}>将指定单元格区域转换为图片</button>
    </div>
  );
}

export default App;

将指定单元格区域转换为图片后的 PNG 文件：

常见问题

导出的图片四周有空白，如何去掉

原因：工作表的页面设置带有页边距，转换时页边距会保留在图片内容的外围，形成一圈空白。

解决：在调用 ToImage 之前，把工作表的 PageSetup 中 LeftMargin、RightMargin、TopMargin、BottomMargin 四个属性都设为 0，再按原有范围转换，图片四周的空白即可收窄。

导出的图片清晰度能否提高

原因：ToImage 输出的像素尺寸由单元格的行高、列宽与转换设置的横向、纵向 DPI 共同决定，默认设置下图片按常规屏幕分辨率生成。

解决：在调用 ToImage 之前，把 workbook.ConverterSetting.XDpi 与 workbook.ConverterSetting.YDpi 设为更大的值。

工作簿中的多张工作表能否分别导出为图片

原因：ToImage 每次只处理一张工作表，多张表需要逐张调用。

解决：用 workbook.Worksheets.Count 取得工作表数量，以 workbook.Worksheets.get(i) 逐张取得工作表，在循环中依次调用 ToImage 与 image.Save，并为每张图片指定不同的输出文件名。

获取免费许可证

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