Excel 中的图片不只是装饰。把公司标识、产品图放进工作表，再为它设置一个超链接，表格就从一份静态说明变成可以点开的入口。图片不是单元格，链接挂在图片对象上，因此无论是设置还是读取，都要走工作表的图片集合，而不是单元格超链接集合。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端完成这些操作，输入输出文件通过虚拟文件系统（VFS）管理，无需后端服务支持。

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

• 为图片设置超链接
• 读取图片上的超链接

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

为图片设置超链接

为图片设置超链接，是把图片变成可点击入口的方式：读者在工作表里点到图片，就会打开指定的地址。链接属于图片本身，不在单元格上，所以要先从工作表的图片集合取得图片对象，再把地址交给它。具体操作步骤如下：

1. 将字体、图片与测试数据文件载入 VFS。
2. 用 workbook.LoadFromFile 加载工作簿。
3. 用 sheet.Pictures.Add 把图片插入工作表预留的位置。
4. 用 picture.SetHyperLink 为图片设置超链接，第二个参数传 true。
5. 用 workbook.SaveToFile 保存工作簿。
6. 用 workbook.Dispose 释放 workbook 对象以释放资源。

以下为完整的代码示例，演示如何在 React 中为 Excel 图片设置超链接：

function App() {
  const pictureHyperlink = 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/`);
    await window.spire.FetchFileToVFS('logo.png', '', `${process.env.PUBLIC_URL}data/`);
    const inputFileName = 'PictureLink.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 picture = sheet.Pictures.Add({ topRow: 10, leftColumn: 1, fileName: 'logo.png' });

    // 为图片设置超链接，第二个参数为 true 表示链接指向工作簿之外
    picture.SetHyperLink('https://www.e-iceblue.com/Misc/about-us.html', true);

    // 保存工作簿
    const outputFileName = 'PictureHyperlink.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, fileFormat: xlsModule.FileFormat.Version2010 });

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

    // 从 VFS 读取结果文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
    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>在 Excel 中为图片添加超链接</h1>
      <button id="picture-hyperlink" onClick={pictureHyperlink}>为图片设置超链接</button>
    </div>
  );
}

export default App;

运行后，为图片设置超链接的效果：

读取图片上的超链接

读取图片上的超链接，用于核对一份已经完成的表格：链接是否齐全、指向的地址是否正确。读到的地址以文本文件的形式输出，便于与链接清单逐条比对。图片超链接不存放在单元格超链接集合里，因此要从工作表的图片集合逐张取出图片，再读它自己的链接对象。具体操作步骤如下：

1. 将字体与测试数据文件载入 VFS。
2. 用 workbook.LoadFromFile 加载工作簿。
3. 用 sheet.Pictures.Count 取得图片数量，据此遍历工作表上的每一张图片。
4. 用 picture.GetHyperLink 取出这一张图片的超链接对象。
5. 用链接对象的 Address 读出目标地址，逐条收集起来。
6. 用 FS.writeFile 把收集到的地址写入 txt 文件，每条地址占一行。
7. 用 workbook.Dispose 释放 workbook 对象以释放资源。

以下为完整的代码示例，演示如何在 React 中读取 Excel 图片上的超链接：

function App() {
  const readPictureHyperlink = 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 = 'PictureHyperlinks.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 pictures = sheet.Pictures;
    const addresses = [];
    for (let i = 0; i < pictures.Count; i++) {
      const link = pictures.get(i).GetHyperLink();
      addresses.push(link.Address);
    }

    // 把读到的地址写入 txt 文件
    const outputFileName = 'ReadPictureHyperlink.txt';
    window.dotnetRuntime.Module.FS.writeFile(outputFileName, addresses.join('\n'));

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

    // 从 VFS 读取结果文件，触发下载
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'text/plain' });
    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>在 Excel 中为图片添加超链接</h1>
      <button id="read-picture-hyperlink" onClick={readPictureHyperlink}>读取图片上的超链接</button>
    </div>
  );
}

export default App;

运行后，读取图片上的超链接的效果：

常见问题

图片上的超链接为什么在 sheet.HyperLinks 里读不到

原因：sheet.HyperLinks 只收集单元格超链接。图片不是单元格，它属于工作表的图片集合，链接挂在图片对象自身。

解决：要走图片集合。在本示例当中，为图片设置超链接之后，sheet.HyperLinks.Count 仍然是 0，把文件保存下来再打开也还是 0。读取图片上的链接要用 sheet.Pictures.get(i).GetHyperLink()，取到链接对象后再读它的 Address。

SetHyperLink 的第二个参数什么时候传 false

原因：picture.SetHyperLink(address, isExternal) 的第二个参数说明目标在不在工作簿之外。

解决：指向网页或外部文件时传 true，链接类型写为 HyperLinkType.Url；指向本工作簿内部的位置时传 false，地址写成单元格引用（如 Sheet1!A1），类型则为 HyperLinkType.Workbook。在本示例当中，两种写法都能保存下来，重新打开文件后读到的 Address 与 Type 也都与设置时一致。

获取免费许可证

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