Excel 里的形状常被当作标注或按钮：示意图上的箭头、标出重点的三角形、圈住区域的云形。给形状挂上超链接，它就从一个图形变成可点击的入口。形状和图片一样不是单元格，链接挂在形状对象自己身上，因此无论是设置还是读取，都要走工作表的形状集合，而不是单元格超链接集合。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端完成这些操作，输入输出文件通过虚拟文件系统（VFS）管理，无需后端服务支持。

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

• 为形状设置超链接
• 读取形状上的超链接

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

为形状设置超链接

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

1. 将字体与测试数据文件载入 VFS。
2. 用 workbook.LoadFromFile 加载工作簿。
3. 用 sheet.PrstGeomShapes.AddPrstGeomShape 在预留的位置加入形状。
4. 用 sheet.PrstGeomShapes.Count 取得形状数量，据此遍历工作表上的每一个形状。
5. 用形状的 HyLink 属性取到超链接对象，把地址赋给它的 Address。
6. 用 workbook.SaveToFile 保存工作簿。
7. 用 workbook.Dispose 释放 workbook 对象以释放资源。

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

function App() {
  const shapeHyperlink = 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 = 'ShapeLink.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 shapes = sheet.PrstGeomShapes;
    shapes.AddPrstGeomShape(10, 1, 90, 60, xlsModule.PrstGeomShapeType.Triangle);
    shapes.AddPrstGeomShape(10, 3, 90, 60, xlsModule.PrstGeomShapeType.CurvedRightArrow);
    shapes.AddPrstGeomShape(10, 5, 90, 60, xlsModule.PrstGeomShapeType.Cloud);

    // 逐个为形状设置超链接
    const addresses = [
      'https://www.e-iceblue.com/Introduce/xls-for-javascript.html',
      'https://www.e-iceblue.com/Buy/Spire.XLS-JavaScript.html',
      'https://www.e-iceblue.com/Download/Spire-Office-JavaScript.html',
    ];
    for (let i = 0; i < shapes.Count; i++) {
      shapes.get(i).HyLink.Address = addresses[i];
    }

    // 保存工作簿
    const outputFileName = 'ShapeHyperlink.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="shape-hyperlink" onClick={shapeHyperlink}>为形状设置超链接</button>
    </div>
  );
}

export default App;

运行后，为形状设置超链接的效果：

读取形状上的超链接

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

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

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

function App() {
  const readShapeHyperlink = 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 = 'ShapeHyperlinks.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 shapes = sheet.PrstGeomShapes;
    const addresses = [];
    for (let i = 0; i < shapes.Count; i++) {
      addresses.push(shapes.get(i).HyLink.Address);
    }

    // 把读到的地址写入 txt 文件
    const outputFileName = 'ReadShapeHyperlink.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-shape-hyperlink" onClick={readShapeHyperlink}>读取形状上的超链接</button>
    </div>
  );
}

export default App;

运行后，读取形状上的超链接的效果：

常见问题

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

原因：sheet.HyperLinks 只收集单元格超链接。形状不是单元格，它属于工作表的形状集合，链接挂在形状对象的 HyLink 上。

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

获取免费许可证

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