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

QQ登录

只需一步,快速开始

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

超级版主

198

主题

9869

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
15465

讲师达人悬赏达人微信认证勋章SpreadJS 认证SpreadJS 高级认证元老葡萄

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2018-1-31 16:00  /   查看:4596  /  回复:0
本帖最后由 ClarkPan 于 2018-1-31 16:07 编辑

众所周知,SpeadJS是一款纯前端的类Excel控件,可以导入导出Excel。但是往往用户有这样的需求,需要将不同Excel之间的Sheet合并到一个工作簿中。这时候往往束手无策,其实SpreadJS稍微进行一下扩展,就可以支持这样的功能了。接下来,让我们一步一步来实现这样的功能。
环境准备
首先添加相关的JS,CSS引用以及部署授权
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Spread HTML Page</title>

  6.     <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.10.3.1.css" rel="stylesheet" type="text/css" />
  7.     <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.10.3.1.min.js"></script>
  8.     <script type="text/javascript" src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.10.3.1.min.js"></script>

  9. </head>
  10. </body>
  11. </html>
复制代码
  1. <script>
  2.     GC.Spread.Sheets.LicenseKey = "<Your Deployment Key>";
  3. </script>
复制代码

之后设置承载spread的div,注意这里需要设置两个一个是隐藏起来不显示的。
  1. <body>
  2.     <div id="hiddenWorkbook" style="display:none; width: 800px; height: 600px; border: 1px solid gray"></div>
  3.     <div id="ss" style="width: 800px; height: 600px; border: 1px solid gray"></div>
  4. </body>
复制代码

初始化Spread
  1. var hiddenWorkbook, excelIO, spread;
  2. window.onload = function () {
  3.     excelIO = new GC.Spread.Excel.IO();
  4.     hiddenWorkbook = new GC.Spread.Sheets.Workbook(document.getElementById("hiddenWorkbook"));
  5.     spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  6. }
复制代码

导入相关实现
首先,我们需要建立相关导入的按钮
  1. <input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls" />
  2. <input type="button" id="loadExcel" value="Import" onclick="ImportFileStart()" />
复制代码

之后创建相关逻辑
  1. function ImportFileStart() {
  2.     var excelFile = document.getElementById("fileDemo").files[0];
  3.     excelIO.open(excelFile, function (json) {
  4.         var workbookObj = json;
  5.         hiddenWorkbook.fromJSON(workbookObj);

  6.     }, function (e) {
  7.         console.log(e);
  8.     });
  9. }
复制代码

并将需要合并的Sheet所在的Excel导入至hiddenWorkbook中去。
创建后效果如下:
image.png861929321.png
接下来我们需要创建一个下拉菜单来供用户选择需要导入的Sheet
  1. <div id="sheetSelection" style="display:none;">
  2.     <p style="display:inline">Select sheet to load: </p>
  3.     <select id="sheetSelect" style="display:inline"></select>
  4. </div>
  5. function CreateSheetSelect() {
  6.     var sheetSelectionDiv = document.getElementById('sheetSelection');
  7.     sheetSelectionDiv.style.display = "inline";
  8.     var dropDown = document.getElementById('sheetSelect');
  9.     for (var s = 0; s < hiddenWorkbook.getSheetCount(); s++) {
  10.         dropDown.options[dropDown.options.length] = new Option(hiddenWorkbook.sheets[s].name(), s);
  11.     }     
  12. }
复制代码
之后在初始化的代码中调用该方法:
  1. CreateSheetSelect()
复制代码
完成效果如下图所示:
image.png297410582.png
拷贝工作表
下面是核心内容拷贝工作表
SpreadJS本身支持通过sheet.toJSON()方法来序列化指定的工作表,但是有些样式不是设置在sheet上,而是设置在样式表中的,这时候单纯序列化sheet导出,就无法满足了。还需要将样式表中的样式循环拷贝。代码如下:
  1. function CopySheet() {
  2.     spread.removeSheet(0);
  3.     spread.addSheet();
  4.     var sheetNumber = document.getElementById('sheetSelect').value;

  5.     var sheetJson = JSON.stringify(hiddenWorkbook.getSheet(sheetNumber).toJSON());
  6.     spread.suspendPaint();
  7.     hiddenWorkbook.getNamedStyles().forEach(function (namedStyle) {
  8.         spread.addNamedStyle(namedStyle);
  9.     })
  10.     spread.getSheet(0).fromJSON(JSON.parse(sheetJson));
  11.     spread.resumePaint();
  12. }
复制代码
最后,让我们看看完成效果。
image.png812683105.png

完整的demo见附件

SJS Single Sheet Loading Sample.zip

8.44 KB, 下载次数: 146

0 个回复

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