使用 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);
}
});

复制代码

		自动登录	找回密码
密码			立即注册

使用 SpreadJS v13.1 实现类似 Excel 的超链接

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄

SpreadJS 认证

SpreadJS 高级认证