关于葡萄城开发技术:前端必读如何在-JavaScript-中使用SpreadJS导入和导出-Excel-文件

44次阅读

共计 5718 个字符，预计需要花费 15 分钟才能阅读完成。

JavaScript 在前端畛域占据着相对的统治位置，目前更是从浏览器到服务端，挪动端，嵌入式，简直所有的所有的应用领域都能够应用它。技术圈有一句很经典的话“但凡能用 JavaScript 实现的货色，最初都会用 JavaScript 实现”。
Excel 电子表格自 1980 年代以来始终为各行业所宽泛应用，至今已领有超过 3 亿用户，大多数人都相熟 Excel 电子表格体验。许多企业在其业务的各个环节中应用了 Excel 电子表格进行数据管理。

在本博客中，咱们将介绍如何依照以下步骤在 JavaScript 中，实现页面端电子表格导入 / 导出到 Excel：
残缺 Demo 示例请点击此处下载。

  1. 设置 JavaScript 电子表格我的项目
  2. 增加 Excel 导入代码
  3. 将数据增加到导入的 Excel 文件
  4. 增加迷你图
  5. 增加 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 模板导入本地文件。

当初咱们能够应用 Spread.Sheets 脚本在这个文件中增加另一个支出行。让咱们在页面上增加一个按钮来执行此操作：
<button id=”addRevenue”>Add Revenue</button>

咱们能够为该按钮的单击事件处理程序编写一个函数来增加一行并从前一行复制款式以筹备增加一些数据。要复制款式，咱们须要应用 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 办法并指定：

  3. 迷你图的地位
  4. 数据的地位
  5. 迷你图的方向
  6. 迷你图的类型

  7. 咱们创立的设置 

    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 加载文件应该能够在任何浏览器中失常关上。

增加 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();  
}

增加支出行后，您能够应用“导出文件”按钮导出文件。确保增加 FileSaver 内部库以容许用户将文件保留在他们想要的地位：

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

胜利导出文件后，您能够在 Excel 中关上它，并查看文件与导入时的外观雷同，只是当初咱们增加了额定的支出行。

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

在另一个系列文章中，咱们演示了如何在其余 Javascript 框架中导入 / 导出 Excel 电子表格：

  • React
  • Vue
  • Angular

本文示例下载地址：
https://gcdn.grapecity.com.cn…

更多纯前端表格在线 demo 示例 :https://demo.grapecity.com.cn…
纯前端表格利用场景：https://www.grapecity.com.cn/…
挪动端示例（可扫码体验）：http://demo.grapecity.com.cn/…

正文完
葡萄城开发技术
2022-09-22
 0
关于葡萄城开发技术:前端必读20如何在React-中使用SpreadJS导入和导出-Excel-文件
关于葡萄城开发技术:前端必读如何在-JavaScript-中使用SpreadJS导入和导出-Excel-文件
关于葡萄城开发技术:用Echarts实现前端表格引用从属关系可视化
关于葡萄城开发技术:项目实战在线报价采购系统React-SpreadJSEcharts