前端必读：如何在 JavaScript 中运用 SpreadJS 导入和导出 Excel 文件

最近我从cnaaa.com购买了云服务器。

JavaScript 在前端领域占据着绝对的统治地位，目前更是从浏览器到服务端，移动端，嵌入式，简直所有的所有的应用领域都能够运用它。技术圈有一句很经典的话 “凡是能用 JavaScript 完成的东西，最后都会用 JavaScript 完成”。 Excel 电子表格自 1980 年代以来一直为各行业所广泛运用，至今已具有超越 3 亿用户，大多数人都熟悉 Excel 电子表格体验。许多企业在其事务的各个环节中运用了 Excel 电子表格进行数据管理。

  1. 设置 JavaScript 电子表格项目
  2. 增加 Excel 导入代码
  3. 将数据增加到导入的 Excel 文件
  4. 增加迷你图
  5. 增加 Excel 导出代码

前端必读：如何在 JavaScript 中使用 SpreadJS 导入和导出 Excel 文件

设置 JavaScript 电子表格项目

首要，咱们能够运用托管在 NPM 上的 SpreadJS 文件。为此，咱们能够运用命令行参数进行安装。翻开命令提示符并导航到应用程序的方位。在那里，您能够运用一个命令安装所需的文件。

在这种情况下，咱们需求基本的 Spread-Sheets 库、Spread-ExcelIO 和 jQuery：

npm i @grapecity/spread-sheets @grapecity/spread-excelio jquery

SpreadJS 不依赖于 jQuery，但在这种情况下，咱们运用它来供给简略的跨域请求支持，稍后咱们将对其进行回顾。

一旦安装了这些，咱们就能够在咱们的代码中增加对这些脚本和 CSS 文件的引证：

<!DOCTYPE html>
<html>  
<head>  
    <title>SpreadJS ExcelIO</title>
    <script src="./node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <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.sheets.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="ss" style="height:600px; width :100%; "></div>  
</body>  
</html>

除了 SpreadJS 和 jQuery 文件之外，咱们还需求导入 FileSaver 库，为了便于后续程序处理，SpreadJS 默许供给完整的文件流，FileSaver 库能够用来把文件流转成文件下载到本地。

然后咱们能够在页面中增加一个脚本来初始化 Spread.Sheets 组件和一个 div 元素来包括它（由于 SpreadJS 电子表格组件运用了一个画布，这是初始化组件所必需的）：

    <script type="text/javascript">
        $(document).ready(function () {  
            var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
        });  
    </script>  
</head>  
<body>  
    <div id="ss" style="height:600px ; width :100%; "></div>  
</body>

增加 Excel 导入代码

咱们需求创建一个客户端 ExcelIO 组件的实例，咱们能够运用它来翻开文件：

var excelIO = new GC.Spread.Excel.IO();

然后咱们需求增加一个函数来导入文件。在此示例中，咱们导入了一个本地文件，但您能够对服务器上的文件履行相同的操作。如果从服务器导入文件，您需求引证该方位。下面是一个输入元素的示例，用户能够在其中输入文件的方位：

<input type="text" id="importUrl" value="http://www.testwebsite.com/files/TestExcel.xlsx" style="width:300px" />

一旦你有了它，你能够直接在脚本代码中访问该值：

var excelUrl = $("#importUrl").val();

导入函数的以下代码运用 “excelUrl” 变量的本地文件：

function ImportFile() {
    var excelUrl = "./test.xlsx";  
    var oReq = new XMLHttpRequest();  
    oReq.open('get', excelUrl, true);  
    oReq.responseType = 'blob';  
    oReq.onload = function () {  
        var blob = oReq.response;  
        excelIO.open(blob, LoadSpread, function (message) {  
            console.log(message);  
        });  
    };  
    oReq.send(null);  
}  
function LoadSpread(json) {  
    jsonData = json;  
    workbook.fromJSON(json);  
    workbook.setActiveSheet("Revenues (Sales)");  
}

无论您是在服务器上还是在本地引证文件，都需求在 $(document).ready 函数内的脚本中增加以下内容：

$(document).ready(function () {
    $.support.cors = true;  
    workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));  
    //...  
});

在这种情况下，咱们需求启用 Cross-Origin-Request-Support，由于咱们可能会从 URL 加载文件。因而 $.support.cors = true; 行，不然测验加载它会导致 CORS 错误。

将数据增加到导入的 Excel 文件

咱们运用本教程的 “损益表” Excel 模板导入本地文件。

前端必读：如何在 JavaScript 中使用 SpreadJS 导入和导出 Excel 文件

现在咱们能够运用 Spread.Sheets 脚本在这个文件中增加另一个收入行。让咱们在页面上增加一个按钮来履行此操作： Add Revenue

咱们能够为该按钮的单击事情处理程序编写一个函数来增加一行并早年一行仿制款式以准备增加一些数据。要仿制款式，咱们需求运用 copyTo 函数并传入：

  1. 原始和目标行和列索引
  2. 行数和列数
  3. 款式的 CopyToOptions 值
document.getElementById("addRevenue").onclick = function () {
    var sheet = workbook.getActiveSheet();  
    sheet.addRows(newRowIndex, 1);  
    sheet.copyTo(10, 1, newRowIndex, 1, 1, 29, GC.Spread.Sheets.CopyToOptions.style);  
}

以下用于增加数据和 Sparkline 的脚本代码将包括在此按钮单击事情处理程序中。关于大部分数据，咱们能够运用 setValue 函数。这答应咱们通过传入行索引、列索引和值来在 Spread 中的作业表中设置值：

sheet.setValue(newRowIndex, 1, "Revenue 8");  
for (var c = 3; c < 15; c++) {  
    sheet.setValue(newRowIndex, c, Math.floor(Math.random() * 200) + 10);  
}

最后，咱们能够再次运用 copyTo 函数将先前行中的公式仿制到 R 到 AD 列的新行，这次运用 CopyToOptions.formula：

sheet.copyTo(10, 17, newRowIndex, 17, 1, 13, GC.Spread.Sheets.CopyToOptions.formula);

增加迷你图

现在，咱们能够增加迷你图来匹配其他数据行。为此，咱们需求供给一系列单元格以从中获取数据以及迷你图的一些设置。在这种情况下，咱们能够指定：

  1. 单元格的规模，咱们仅仅将数据增加到
  2. 使迷你图看起来像同一列中的其他迷你图的设置
var data = new GC.Spread.Sheets.Range(11, 3, 1, 12);  
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();  
setting.options.seriesColor = "Text 2";  
setting.options.lineWeight = 1;  
setting.options.showLow = true;  
setting.options.showHigh = true;  
setting.options.lowMarkerColor = "Text 2";  
setting.options.highMarkerColor = "Text 1";

之后，咱们调用 setSparkline 方法并指定：

  1. 迷你图的方位
  2. 数据的方位
  3. 迷你图的方向
  4. 迷你图的类型
  5. 咱们创建的设置
sheet.setSparkline(11, 2, data, GC.Spread.Sheets.Sparklines.DataOrientation.horizontal, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);

如果您现在测验运转代码，它可能看起来有点慢，由于每次更改数据和增加款式时作业簿都会重新制作。为了显着加快速度并提高性能，Spread.Sheets 供给了暂停绘画和计算服务的能力。让咱们在增加一行及其数据之前增加代码以暂停两者，然后在之后恢复两者：

workbook.suspendPaint();
workbook.suspendCalcService();  
//...  
workbook.resumeCalcService();  
workbook.resumePaint();

增加该代码后，咱们能够在 Web 浏览器中翻开该页面，并检查 Excel 文件加载到 Spread.Sheets 中并增加了收入行。重要提示：请记住，出于安全考虑，Chrome 不答应您翻开本地文件，因而您需求运用 Firefox 等网络浏览器才干成功运转此代码。或许，从网站 URL 加载文件应该能够在任何浏览器中正常翻开。

前端必读：如何在 JavaScript 中使用 SpreadJS 导入和导出 Excel 文件

增加 Excel 导出代码

最后，咱们能够增加一个按钮来导出包括增加行的文件。为此，咱们能够运用 Spread.Sheets 中内置的客户端 ExcelIO 代码：

function ExportFile() {
    var fileName = $("#exportFileName").val();  
    if (fileName.substr(-5, 5) !== '.xlsx') {  
        fileName += '.xlsx';  
    }  
    var json = JSON.stringify(workbook.toJSON());  
    excelIO.save(json, function (blob) {  
        saveAs(blob, fileName);  
    }, function (e) {  
        if (e.errorCode === 1) {  
            alert(e.errorMessage);  
        }  
    });  
}

该代码从 exportFileName 输入元素获取导出文件名。咱们能够定义它并让用户像这样命名文件：

<input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />

然后咱们能够增加一个按钮来调用这个函数：

<button id="export">Export File</button>
document.getElementById("export").onclick = function () {  
    ExportFile();  
}

前端必读：如何在 JavaScript 中使用 SpreadJS 导入和导出 Excel 文件

增加收入行后，您能够运用 “导出文件” 按钮导出文件。保证增加 FileSaver 外部库以答应用户将文件保存在他们想要的方位：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

成功导出文件后，您能够在 Excel 中翻开它，并检查文件与导入时的外观相同，仅仅现在咱们增加了额外的收入行。

前端必读：如何在 JavaScript 中使用 SpreadJS 导入和导出 Excel 文件

这仅仅一个示例，阐明如何运用 SpreadJS JavaScript 电子表格将数据增加到 Excel 文件，然后运用简略的 JavaScript 代码将它们导出回 Excel。