Excel 表格经常需要把分散的内容串起来：汇总页上点一下就能跳到明细工作表，报价单上点一下就能打开放在旁边的源文件。这类「跳到别处」的能力由单元格超链接承担，链接类型决定跳到哪儿——同一个工作簿里的另一张工作表，或者工作簿之外的某个文件。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端完成这些操作，输入输出文件通过虚拟文件系统（VFS）管理，无需后端服务支持。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
添加指向其他工作表的链接
跨表链接解决的是同一个工作簿内部「从这里跳到那里」的问题：把分散在各张工作表上的内容串成一条可点击的路径，读者不必自己翻找工作表。链接依附在单元格上，因此要先在目标单元格上建立一个超链接对象，再依次交代它跳向哪里、显示成什么文字。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 用
workbook.LoadFromFile加载工作簿。 - 用
sheet.HyperLinks.Add在目标单元格上新建一个超链接对象。 - 用超链接对象的
Type属性把类型标为工作簿内部链接，取值为xlsModule.HyperLinkType.Workbook。 - 用
TextToDisplay属性设置单元格上显示的链接文字。 - 用
Address属性写入跳转位置，格式为「工作表名!单元格」，例如数据!B7。 - 用单元格样式把链接文字设成蓝色加下划线，与普通文本区分开。
- 用
workbook.SaveToFile保存工作簿。 - 用
workbook.Dispose释放 workbook 对象以释放资源。
以下为完整的代码示例，演示如何在 React 中为 Excel 单元格添加跨工作表链接：
function App() {
const linkToOtherSheet = 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 = 'SheetLink.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
// 取第一个工作表，在 B5 单元格上新建一个超链接对象
const sheet = workbook.Worksheets.get(0);
const cell = sheet.Range.get('B5');
const hyperlink = sheet.HyperLinks.Add({ range: cell });
// 标为工作簿内部链接，指向第二个工作表的 B7 单元格
hyperlink.Type = xlsModule.HyperLinkType.Workbook;
hyperlink.TextToDisplay = '查看数据表中的全年合计';
hyperlink.Address = '数据!B7';
// 把链接文字设成蓝色加下划线，与普通文本区分开
cell.Style.Font.Color = xlsModule.Color.get_Blue();
cell.Style.Font.Underline = xlsModule.FontUnderlineType.Single;
// 保存工作簿
const outputFileName = 'LinkToOtherSheetCell.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="link-to-other-sheet" onClick={linkToOtherSheet}>添加指向其他工作表的链接</button>
<button id="link-to-external-file" onClick={linkToExternalFile}>添加指向外部文件的链接</button>
</div>
);
}
export default App;
运行后，添加跨表链接的效果：
添加指向外部文件的链接
跨表链接只能在同一个工作簿里跳转，目标一旦落到工作簿之外，就要换成文件链接。写法和跨表链接只有两处不同：标明它是文件链接，并把跳转位置换成文件路径；路径既可以是完整路径，也可以是相对当前工作簿的相对路径。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 用
workbook.LoadFromFile加载工作簿。 - 用
sheet.HyperLinks.Add在目标单元格上新建一个超链接对象。 - 用
Type属性把类型标为文件链接，取值为xlsModule.HyperLinkType.File。 - 用
TextToDisplay属性设置单元格上显示的链接文字。 - 用
Address属性写入外部文件的路径，例如../files/Quote.xlsx。 - 用单元格样式把链接文字设成蓝色加下划线，与普通文本区分开。
- 用
workbook.SaveToFile保存工作簿。 - 用
workbook.Dispose释放 workbook 对象以释放资源。
以下为完整的代码示例，演示如何在 React 中为 Excel 单元格添加指向外部文件的链接：
function App() {
const linkToExternalFile = 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 = 'SheetLink.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 加载工作簿
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
// 取第一个工作表，在 B6 单元格上新建一个超链接对象
const sheet = workbook.Worksheets.get(0);
const cell = sheet.Range.get('B6');
const hyperlink = sheet.HyperLinks.Add({ range: cell });
// 标为文件链接，指向工作簿之外的一个文件
hyperlink.Type = xlsModule.HyperLinkType.File;
hyperlink.TextToDisplay = '打开外部报价单';
hyperlink.Address = '../files/Quote.xlsx';
// 把链接文字设成蓝色加下划线，与普通文本区分开
cell.Style.Font.Color = xlsModule.Color.get_Blue();
cell.Style.Font.Underline = xlsModule.FontUnderlineType.Single;
// 保存工作簿
const outputFileName = 'LinkToExternalFile.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="link-to-other-sheet" onClick={linkToOtherSheet}>添加指向其他工作表的链接</button>
<button id="link-to-external-file" onClick={linkToExternalFile}>添加指向外部文件的链接</button>
</div>
);
}
export default App;
运行后，添加外部文件链接的效果：
常见问题
给已经有文字的单元格加链接，文字为什么被地址顶掉了
原因：单元格显示的文字由 TextToDisplay 决定。新建链接时如果不设置它，地址就会顶上来充当显示文字；而且替换发生在添加链接的那一刻，事后再读 Range.Text，拿到的已经不是原文，而是地址。
解决：在添加链接之前先把原文读下来，加完链接再把它赋回 TextToDisplay：
const cell = sheet.Range.get('B6');
const text = cell.Text; // 加链接之前先留住原文
const hyperlink = sheet.HyperLinks.Add({ range: cell });
hyperlink.Type = xlsModule.HyperLinkType.File;
hyperlink.Address = '../files/Quote.xlsx';
hyperlink.TextToDisplay = text; // 把原文赋回去，单元格仍显示原来的文字
怎么删掉链接但保留单元格里的文字
原因：链接和文字是两回事——链接挂在单元格上，文字才是单元格的内容。Range.ClearAll() 清的是单元格内容，用它来去掉链接，文字会一起没了。
解决：用 sheet.HyperLinks.RemoveAt 按下标移除链接，单元格文字保持原样。例如 sheet.HyperLinks.RemoveAt(0) 移除第一条链接，移除之后文字仍在单元格里，只是不再可点击。
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
