超链接是 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 天的临时许可证。
