国家  china

如何通过SpreadJS导入单独的Sheet

众所周知,SpeadJS是一款纯前端的类Excel控件,可以导入导出Excel。但是往往用户有这样的需求,需要将不同Excel之间的Sheet合并到一个工作簿中。这时候往往束手无策,其实SpreadJS稍微进行一下扩展,就可以支持这样的功能了。接下来,让我们一步一步来实现这样的功能。

环境准备

首先添加相关的JS,CSS引用以及部署授权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Spread HTML Page</title>

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

</head>
</body>
</html>
<script>
    GC.Spread.Sheets.LicenseKey = "<Your Deployment Key>";
</script>

之后设置承载spread的div,注意这里需要设置两个一个是隐藏起来不显示的。

<body>
    <div id="hiddenWorkbook" style="display:none; width: 800px; height: 600px; border: 1px solid gray"></div>
    <div id="ss" style="width: 800px; height: 600px; border: 1px solid gray"></div>
</body>

初始化Spread

var hiddenWorkbook, excelIO, spread;
window.onload = function () {
    excelIO = new GC.Spread.Excel.IO();
    hiddenWorkbook = new GC.Spread.Sheets.Workbook(document.getElementById("hiddenWorkbook"));
    spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
}

导入相关实现

首先,我们需要建立相关导入的按钮

<input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls" />
<input type="button" id="loadExcel" value="Import" onclick="ImportFileStart()" />

之后创建相关逻辑

function ImportFileStart() {
    var excelFile = document.getElementById("fileDemo").files[0];
    excelIO.open(excelFile, function (json) {
        var workbookObj = json;
        hiddenWorkbook.fromJSON(workbookObj);

    }, function (e) {
        console.log(e);
    });
}

并将需要合并的Sheet所在的Excel导入至hiddenWorkbook中去。

创建后效果如下:

sjs-file-not-chosen

接下来我们需要创建一个下拉菜单来供用户选择需要导入的Sheet

<div id="sheetSelection" style="display:none;">
    <p style="display:inline">Select sheet to load: </p>
    <select id="sheetSelect" style="display:inline"></select>
</div>
function CreateSheetSelect() {
    var sheetSelectionDiv = document.getElementById('sheetSelection');
    sheetSelectionDiv.style.display = "inline";
    var dropDown = document.getElementById('sheetSelect');
    for (var s = 0; s < hiddenWorkbook.getSheetCount(); s++) {
        dropDown.options[dropDown.options.length] = new Option(hiddenWorkbook.sheets[s].name(), s);
    }     
}

之后在初始化的代码中调用该方法:

CreateSheetSelect()

 

完成效果如下图所示:

sjs-file-chosen

拷贝工作表

下面是核心内容拷贝工作表

SpreadJS本身支持通过sheet.toJSON()方法来序列化指定的工作表,但是有些样式不是设置在sheet上,而是设置在样式表中的,这时候单纯序列化sheet导出,就无法满足了。还需要将样式表中的样式循环拷贝。代码如下:

function CopySheet() {
    spread.removeSheet(0);
    spread.addSheet();
    var sheetNumber = document.getElementById('sheetSelect').value;

    var sheetJson = JSON.stringify(hiddenWorkbook.getSheet(sheetNumber).toJSON());
    spread.suspendPaint();
    hiddenWorkbook.getNamedStyles().forEach(function (namedStyle) {
        spread.addNamedStyle(namedStyle);
    })
    spread.getSheet(0).fromJSON(JSON.parse(sheetJson));
    spread.resumePaint();
}

最后,让我们看看完成效果。

sjs-sheet-loaded

以上就是导入单独sheet的全部内容,完整demo的下载地址如下:

http://gcdn.gcpowertools.com.cn/forum.php?mod=viewthread&tid=45388&page=1&extra=#pid173316

如果您对本产品感兴趣,请关注产品官网:http://www.gcpowertools.com.cn/products/spreadjs/

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/sjs-single-sheet-loading.aspx

不允许评论