如何使用JavaScript实现前端导入和导出excel文件

收藏

本帖最后由 alizee1025 于 2019-7-2 15:06 编辑

一、SpreadJS 简介

SpreadJS是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件，以“高速低耗、纯前端、零依赖”为产品特色，可嵌入任何操作系统，同时满足 .NET、Java、响应式 Web 应用及移动跨平台的表格数据处理和类Excel 的表格应用开发，为终端用户带来亲切的 Excel 体验。本文将以xlsx文件格式为例，展示如何使用SpreadJS实现前端导入和导出excel文件。

1. 主要功能

功能、UI 与 Excel 高度类似
兼容 450 种以上的 Excel 公式
符合 UMD 规范，可按需加载
完善的数据可视化，支持形状、图表、迷你图
纯前端导入、导出 Excel 文件
使用 HTML5 图形（Canvas）绘制界面，具备高性能和响应速度

2. 安装包目录结构

├──Spread.Sheets SpreadJS产品包

│ └── Designer SpreadJS表格设计器

│ ├── Spread.Sheets-Designer.12.0.0.AppImage [Mac]

│ ├── Spread.Sheets-Designer.12.0.0.dmg [Linux]

│ └── Spread.Sheets-Designer.12.0.0 [Windows]

│ └── Spread.Sheets.Docs.12.0.0 SpreadJS 表格接口文档

│ ├── content

│ └── index

│ └── Spread.Sheets.Release.12.0.0 SpreadJS 表格 JavaScript 库/演示用例

│ ├── css 样式文件

│ ├── definition TS 引用文件

│ ├── readme

│ ├── samples 示例代码（包括原生JS,Angular,Vue,React）

│ ├── scripts JS文件

│ ├── GrapeCity-EULA

│ └── LICENSE

3. 如何使用

1. Spread.Sheets不依赖任何第三方组件。它只需要引用下列文件：gc.spread.sheets.xx.x.x.css，gc.spread.sheets.all.xx.x.x.min.js。

<linkrel="styleSheet" href="gc.spread.sheets.xx.x.x.css" />
<scriptsrc="gc.spread.sheets.all.xx.x.x.min.js"type="text/javascript"></script>
<scriptsrc="gc.spread.sheets.resources.zh.xx.x.x.min.js"type="text/javascript"></script>

复制代码

2. 在页面的body元素中添加一个DOM元素作为它的容器。

<divid="ss" style="width:100%; height:360px;border: 1px solidgray;"></div>

复制代码

3. 用代码“newGC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 })”来初始化Spread。

window.onload= function () {
var spread = newGC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
};

复制代码

4. 初始化 SpreadJS 在线示例

二、前端导入导出Excel

实现前端导入导出只需要引入gc.spread.excelio库，使用excelIO.open 和excelIO.save两个方法即可，不需要配置任何选项，代码十分简洁易懂。

具体步骤如下：

前端导入导出支持将Spread json导出为excel文件(.xlsx)和将excel文件导入为Spread json.

使用前端导入导出, 你需要将相关的js文件添加的document的head区域。例如:

<head>
...
<script src='.../spreadjs/gc.spread.sheets.all.x.xx.xxxxx.x.min.js' type='text/javascript'></script>
<script src='.../spreadjs/plugins/gc.spread.excelio.x.xx.xxxxx.x.min.js' type='text/javascript'></script>
</head>

复制代码

初始化Workbook实例和ExcelIO实例：

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
var excelIo = new GC.Spread.Excel.IO();

复制代码

接下来你就可以使用open方法将excel文件导入为spread json，使用 save 方法将spread json导出为excel文件。例如:

//import excel file to Spread.Sheets json
excelIo.open(excelFile, function (json) {
var workbookObj = json;
workbook.fromJSON(workbookObj);
}, function (e) {
// process error
console.log(e);
});
//export Spread.Sheets json to excel file
excelio.save(json, function (blob) {
//do whatever you want with blob
//such as you can save it
}, function (e) {
//process error
console.log(e);
});

复制代码

同时，你还可打开或保存一个带有密码保护的excel文件，只需要在open和save方法中传入参数options{password:xxxx}即可。例如:

//import excel file to Spread.Sheets json
excelIo.open(excelFile, function (json) {
var workbookObj = json;
workbook.fromJSON(workbookObj);
}, function (e) {
// process error
console.log(e);
},{password:xxxx});
//export Spread.Sheets json to excel file
excelio.save(json, function (blob) {
//do whatever you want with blob
//such as you can save it
}, function (e) {
//process error
console.log(e);
},{password:xxxx});

复制代码

前端导入导出Excel 的示例源码及数据源下载：

excel_data.js (31.91 KB, 下载次数: 995)

2019-7-2 14:03 上传

点击文件名下载附件

ExcelIO.html (5.12 KB, 下载次数: 883)

2019-7-2 14:03 上传

点击文件名下载附件

三、处理单元格合并

一般来说，前端生成excel而不是csv，其最主要的原因都是为了解决csv不能实现单元格合并的问题，假设我们要生成带有单元格格式的Excel文件，也可以通过SpreadJS内置属性实现：

调用 addSpan 方法来合并指定区域的单元格, 以此来构建一个新的更大的单元格, 参见以下示例代码:

// Merge cells and set label
sheet.addSpan(1, 4, 1, 7);
sheet.setValue(1, 4, "Goods");
// Merge cells across multi rows (3) and columns (4)
sheet.addSpan(20, 1, 3, 4);
sheet.getCell(20, 1).value("Demo").hAlign.vAlign;

复制代码

调用 removeSpan 方法来分解指定包含合并的单元格：

sheet.removeSpan(20, 1);

复制代码

Workbook的 allowUserDragMerge 选项表明是否允许通过鼠标拖拽来合并单元格。把 allowUserDragMerge 改为true，在选择区域边缘处会出现一个特殊的标记。

// default value is false
spread.options.allowUserDragMerge = true;

复制代码

备注: 确定你要展现在合并单元格中的信息在合并前处于合并区域的最左上单元格,合并单元格中的其他单元格信息将被隐藏, 直到合并信息被分解（与Excel相同）。

处理单元格合并的示例源码及数据源下载：

cellSpan.html (10.03 KB, 下载次数: 576)

		自动登录	找回密码
密码			立即注册

如何使用JavaScript实现前端导入和导出excel文件

0 个回复

活字格认证

活字格高级认证

微信认证勋章