请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

AlexZ 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2020-6-30 18:18  /   查看:2998  /  回复:0
SpreadJS v13.1包括增强的超链接支持。在SpreadJS的早期版本中,超链接仅打开URL链接,而不能导出到Excel。我们的最新更新解决了这些问题以及更多问题。

除了Excel兼容性之外,我们还添加了创建不同类型的超链接的选项:

  • 网址:在当前的网络浏览器中打开指定的网址
  • 电子邮件地址:打开系统的默认邮件应用程序并开始新的电子邮件
  • 工作表位置:将活动单元格导航到工作簿中的特定单元格
  • 自定义命令:实施自定义操作,该操作在用户单击超链接时发生
  • 在下面的教程中,我们将导入一个Excel文件,并使用SpreadJS v13.1添加不同类型的超链接。

项目设置:创建HTML页面
创建一个包含SpreadJS引用的HTML文件。
在文件夹中创建一个HTML文件,并添加以下内容:

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head
  4.     meta charset="utf-8"   />
  5.     <title>SpreadJS Hyperlinks</title>

  6.     <link href=" ./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="
  7. stylesheet" type="text/css"   />
  8.     <script type="text/javascript" src=" ./node_modules/@grapecity/spread-sheets/dist/gc.spread.all.min.
  9. js"></script>
  10.     <script type="text/javascript" src=" ./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js">
  11. </script>

  12. </head>
  13. <body>
  14.     <div id="spreadSheet" style="width: 1300px; height: 800px; border: 1px solid gray"></div>
  15. </body>
  16. </html>
复制代码
安装SpreadJS NPM文件
使用命令提示符导航到项目文件夹,然后键入:

  1. 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实例并将该模板加载到其中:
  1. <script>
  2.     window.onload = function () {
  3.         var spread = new GC.Spread.Sheets.Workbook(document.getElementByID("spreadSheet"),{ sheetCount: 1});
  4.         spread.fromJSON(ExcelTemplate);
  5.         var sheet = spread.getActiveSheet();
  6.     }
  7. </script>
复制代码
为该特定工作表创建一个JSON模板,稍后我们将使用它。我们称其为“ sheetJSONString”:
  1. var sheetJSONString = JSON.stringify(sheet.toJSON());
复制代码
image.png906915588.png
我们已经建立了HTML页面,并准备将新的超链接添加到SpreadJS。
将超链接添加到JavaScript电子表格网址超链接
在这种情况下,我们希望链接显示在上面模板中“雇主网站”旁边的单元格中。
  • 使用setHyperlink函数,并添加URL
  • 设置我们要在单元格中显示的文本的值
  1. //URL
  2. sheet.setValue(2, 2, "GrapeCity")
  3. sheet.setHyperlink(2, 2, { url: "https://www.grapecity.com"});
复制代码
电子邮件地址超链接
单击后,它将打开系统的默认邮件应用程序,并创建发给您指定收件人的电子邮件草稿。
  • 该代码本质上与URL超链接相同
  1. //Email Address
  2. sheet.setValue(2, 6, "us.sales@grapecity.com")
  3. sheet.setHyperlink(2, 6, { url: "us.sales@grapecity.com"});
复制代码
与URL超链接一样,电子邮件值不必与电子邮件地址匹配。


工作表位置超链接
自动导航到工作簿中的指定单元格和工作表。
  • 使用相同的“设置超链接”功能
  • 将“ url”属性的语法更改为: sjs://<Sheet Name><Cell Reference>
  • 链接将导航到整个单元格
  1. //Sheet Location
  2. sheet.setValue(10, 4, "Personal Totals");
  3. sheet.setHyperlink(10, 4, { url: "sjs://Personal Monthly Budget!G62:J67"});
复制代码
超链接的自定义命令
  • 我们无法将自定义命令链接导出到Excel
  • 使用setHyperlink创建自定义命令超链接
  • 代替指定“ url”属性,而指定“ command”属性
  • 单击此链接以获取命令属性列表
创建自定义命令
下面,我们将为新的自定义命令创建一个函数,并生成一个预算表。此功能完成以下任务:
  • 将预算表添加到工作簿中
  • 导入我们之前定义的工作表JSON字符串
  • 重命名工作表
  • 添加超链接
  1. //Custom Command
  2. sheet.setValue(11, 4, "New Minthly Budget");
  3. sheet.setHyperlink(11, 4, {
  4.     command: function (sheet) {
  5.         spread.addSheet(spread.sheets.length, new GC.Spread.Sheets.Worksheet ());
  6.         var newSheet = spread.getSheet(spread.sheets.length - 1);
  7.         newSheet.fromJSON(JSON.parse(sheetJSONString));
  8.         newSheet.name("Personal Monthly Budget " + (spread.sheets.length - 1));
  9.         spread.setActiveSheetIndex(spread.sheets.length-1);
  10.         addHyperlinks(spread, sheetJSONString);   
  11.     }
  12. });
复制代码
image.png41209410.png





SpreadJS V13 SP1 Hyperlinks.zip

1.49 MB, 下载次数: 38

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部