超链接是 Excel 中用于快速跳转到网页、邮件地址或其他资源的常用元素，经常出现在产品官网、联系方式、参考资料等表格中。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成超链接的添加、读取、修改与删除操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

本文介绍几个常用功能点：

• 添加超链接到文本
• 读取超链接
• 修改超链接
• 删除超链接

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

添加超链接到文本

在含有公司名称、网站名称或邮箱地址等文本的单元格上，可以为这些文本添加超链接，使其可以直接点击跳转到网页或发送邮件。

function App() {
  const addHyperlinkToText = 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('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
    const inputFileName = 'HyperlinksSample.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);

    // 为 D10 单元格中的文本添加网页超链接
    const urlLink = sheet.HyperLinks.Add({ range: sheet.Range.get('D10') });
    urlLink.TextToDisplay = sheet.Range.get('D10').Text;
    urlLink.Type = xlsModule.HyperLinkType.Url;
    urlLink.Address = 'https://www.e-iceblue.com/';

    // 为 E10 单元格中的文本添加邮件超链接
    const mailLink = sheet.HyperLinks.Add({ range: sheet.Range.get('E10') });
    mailLink.TextToDisplay = sheet.Range.get('E10').Text;
    mailLink.Type = xlsModule.HyperLinkType.Url;
    mailLink.Address = 'mailto:该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。';// 保存工作簿 const outputFileName = 'AddHyperlinkToText_output.xlsx';workbook.SaveToFile({fileName:outputFileName,version:xlsModule.ExcelVersion.Version2010});// 释放资源 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>Add Hyperlink To Text</h1><button onClick={addHyperlinkToText}>Start</button></div>);}export default App;

D10 单元格中的文本变为可点击的网页链接，E10 单元格中的邮箱地址变为可发送邮件的邮件链接。

读取超链接

通过 Worksheet.HyperLinks集合可以获取工作表中所有超链接，并通过索引访问每个超链接的目标地址。

function App(){const readHyperlinks = async () =>{// 获取 Spire.XLS WASM 模块 const xlsModule = window.wasmModule?.spirexls;// 检查模块是否就绪 if (!xlsModule){alert('Spire.Xls is not ready yet');return;}// 将 Excel 文件载入 VFS const inputFileName = 'HyperlinksSample.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 hyperlinkCount = sheet.HyperLinks.Count;let allAddresses = '';for (let i = 0;i <hyperlinkCount;i++){const address = sheet.HyperLinks.get(i).Address;allAddresses += address + '\n';}// 将超链接地址保存为 txt 文件 const outputFileName = 'ReadHyperlinks_output.txt';window.dotnetRuntime.Module.FS.writeFile(outputFileName,allAddresses);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>Read Hyperlinks</h1><button onClick={readHyperlinks}>Start</button></div>);}export default App;

通过 HyperLinks.Count获取工作表中超链接的总数。

修改超链接

通过 HyperLinks.get(0)按索引获取超链接后，可以重新设置其显示文本和目标地址，实现超链接的修改。

function App(){const modifyHyperlink = 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('simsun.ttc','/Library/Fonts/',`${process.env.PUBLIC_URL}/font/`);const inputFileName = 'HyperlinksSample.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 links = sheet.HyperLinks;// 修改第一个超链接的显示文本与目标地址 links.get(0).TextToDisplay = 'E-iceblue';links.get(0).Address = 'https://www.e-iceblue.com/';// 保存工作簿 const outputFileName = 'ModifyHyperlink_output.xlsx';workbook.SaveToFile({fileName:outputFileName,version:xlsModule.ExcelVersion.Version2010});// 释放资源 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>Modify Hyperlink</h1><button onClick={modifyHyperlink}>Start</button></div>);}export default App;

修改后，第一个超链接的显示文本和目标地址均已更新。

删除超链接

通过 HyperLinks.RemoveAt(index)方法只删除超链接保留文本,也可以通过 Range.ClearAll()方法可以清除单元格中包含链接的所有内容。

function App(){const removeHyperlinks = 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('simsun.ttc','/Library/Fonts/',`${process.env.PUBLIC_URL}/font/`);const inputFileName = 'HyperlinksSample.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 links = sheet.HyperLinks;// 清除链接单元格中的s所有内容 // sheet.Range.get('A1').ClearAll();// sheet.Range.get('A2').ClearAll();// sheet.Range.get('A3').ClearAll();// 仅删除超链接，保留原文本 sheet.HyperLinks.RemoveAt(0);// 保存工作簿 const outputFileName = 'RemoveHyperlinks_output.xlsx';workbook.SaveToFile({fileName:outputFileName,version:xlsModule.ExcelVersion.Version2010});// 释放资源 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>Remove Hyperlinks</h1><button onClick={removeHyperlinks}>Start</button></div>);}export default App;

常见问题

修改超链接后目标地址未更新

原因：修改的是错误的超链接索引，或者目标单元格上不存在超链接。

解决：确认工作表中已存在超链接，并通过 sheet.HyperLinks.get(0)等方式按正确索引访问后，再设置其 Address属性。

获取免费许可证

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