使用 SpreadJS v13.1 实现类似 Excel 的超链接
SpreadJS v13.1包括增强的超链接支持。在SpreadJS的早期版本中，超链接仅打开URL链接，而不能导出到Excel。我们的最新更新解决了这些问题以及更多问题。除了Excel兼容性之外，我们还添加了创建不同类型的超链接的选项：
[*]网址：在当前的网络浏览器中打开指定的网址
[*]电子邮件地址：打开系统的默认邮件应用程序并开始新的电子邮件
[*]工作表位置：将活动单元格导航到工作簿中的特定单元格
[*]自定义命令：实施自定义操作，该操作在用户单击超链接时发生
[*]在下面的教程中，我们将导入一个Excel文件，并使用SpreadJS v13.1添加不同类型的超链接。
项目设置：创建HTML页面
创建一个包含SpreadJS引用的HTML文件。
在文件夹中创建一个HTML文件，并添加以下内容：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head
meta charset="utf-8" />
<title>SpreadJS Hyperlinks</title>
<link href=" ./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="
stylesheet" type="text/css" />
<script type="text/javascript" src=" ./node_modules/@grapecity/spread-sheets/dist/gc.spread.all.min.
js"></script>
<script type="text/javascript" src=" ./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js">
</script>
</head>
<body>
<div id="spreadSheet" style="width: 1300px; height: 800px; border: 1px solid gray"></div>
</body>
</html>安装SpreadJS NPM文件
使用命令提示符导航到项目文件夹，然后键入：
npm install @grapecity/spread-sheets @grapecity/spread-sheets-excelio该操作将在项目中安装最新的SpreadJS文件，并使HTML页面中的那些引用正常工作。
将Excel模板导入SpreadJS。
为简单起见，我们使用SpreadJS Designer从Excel模板创建了一个JS文件，并将其包含在演示zip文件中（在本文结尾）。
要在HTML页面中加载此文件，请添加以下行：
<script type="text/javascript" src="./ExcelTemplate.js"></script>
并添加脚本代码以初始化SpreadJS实例并将该模板加载到其中：<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementByID("spreadSheet"),{ sheetCount: 1});
spread.fromJSON(ExcelTemplate);
var sheet = spread.getActiveSheet();
}
</script>为该特定工作表创建一个JSON模板，稍后我们将使用它。我们称其为“ sheetJSONString”：
var sheetJSONString = JSON.stringify(sheet.toJSON());
我们已经建立了HTML页面，并准备将新的超链接添加到SpreadJS。
将超链接添加到JavaScript电子表格网址超链接在这种情况下，我们希望链接显示在上面模板中“雇主网站”旁边的单元格中。
[*]使用setHyperlink函数，并添加URL
[*]设置我们要在单元格中显示的文本的值
//URL
sheet.setValue(2, 2, "GrapeCity")
sheet.setHyperlink(2, 2, { url: "https://www.grapecity.com"});电子邮件地址超链接单击后，它将打开系统的默认邮件应用程序，并创建发给您指定收件人的电子邮件草稿。
[*]该代码本质上与URL超链接相同
//Email Address
sheet.setValue(2, 6, "us.sales@grapecity.com")
sheet.setHyperlink(2, 6, { url: "us.sales@grapecity.com"});与URL超链接一样，电子邮件值不必与电子邮件地址匹配。
工作表位置超链接自动导航到工作簿中的指定单元格和工作表。
[*]使用相同的“设置超链接”功能
[*]将“ url”属性的语法更改为： sjs://<Sheet Name><Cell Reference>
[*]链接将导航到整个单元格
//Sheet Location
sheet.setValue(10, 4, "Personal Totals");
sheet.setHyperlink(10, 4, { url: "sjs://Personal Monthly Budget!G62:J67"});超链接的自定义命令
[*]我们无法将自定义命令链接导出到Excel
[*]使用setHyperlink创建自定义命令超链接
[*]代替指定“ url”属性，而指定“ command”属性
[*]单击此链接以获取命令属性列表
创建自定义命令下面，我们将为新的自定义命令创建一个函数，并生成一个预算表。此功能完成以下任务：
[*]将预算表添加到工作簿中
[*]导入我们之前定义的工作表JSON字符串
[*]重命名工作表
[*]添加超链接
//Custom Command
sheet.setValue(11, 4, "New Minthly Budget");
sheet.setHyperlink(11, 4, {
command: function (sheet) {
spread.addSheet(spread.sheets.length, new GC.Spread.Sheets.Worksheet ());
var newSheet = spread.getSheet(spread.sheets.length - 1);
newSheet.fromJSON(JSON.parse(sheetJSONString));
newSheet.name("Personal Monthly Budget " + (spread.sheets.length - 1));
spread.setActiveSheetIndex(spread.sheets.length-1);
addHyperlinks(spread, sheetJSONString);
}
});
页:
[1]