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

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

、SpreadJS 简介

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

本文将以 xlsx 文件格式为例，展示如何使用 SpreadJS 实现前端导入和导出excel文件。

SpreadJS 官网
本文在线Demo示例
导入导出Excel视频演示

1. 主要功能

a. 功能、UI 与 Excel 高度类似

b. 兼容 450 种以上的 Excel 公式

c. 符合 UMD 规范，可按需加载

d. 完善的数据可视化，支持形状、图表、迷你图

e. 纯前端导入、导出 Excel 文件

f. 使用 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. 如何使用

a. Spread.Sheets不依赖任何第三方组件。它只需要引用下列文件：

gc.spread.sheets.xx.x.x.css，gc.spread.sheets.all.xx.x.x.min.js。

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

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

window.onload=function () {

var spread=new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

};

d. 初始化 SpreadJS 在线示例

二、前端导入导出Excel

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

具体步骤如下：

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

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

<head>

...

</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 的示例源码及数据源下载：

示例源码：ExcelIO.html
数据源文件：excel_data.js

三、处理单元格合并

一般来说，前端生成 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

四、自定义 Excel 的文件样式

Spread.Sheets 提供一个样式的类, 其中包含很多可配置属性, 如前景色、背景色等。

你可以通过这些属性，构造一个样式并设置不同的参数, 示例代码如下:

var style=new GC.Spread.Sheets.Style();

style.backColor='red';

style.foreColor='green';

style.isVerticalText='true';

同样，你也可以将此样式设置给单元格, 行, 或者列:

//set style to cell.

sheet.setStyle(5, 5, style, GC.Spread.Sheets.SheetArea.viewport);

//set style to row.

sheet.setStyle(5, -1, style, GC.Spread.Sheets.SheetArea.viewport);

//set style to column.

sheet.setStyle(-1, 5, style, GC.Spread.Sheets.SheetArea.viewport);

样式在不同的层级结构中具有不同的优先级别: 单元格 > 行 > 列。

Spread.Sheets 支持给样式设置一个名称, 并将这个命名过的样式加入到表单的名称样式集合中。这样让样式的使用和管理更方便。

你可以构造一个名称样式, 并将此样式添加到表单或者 Spread 控件的名称样式集合中，如：

var style=new GC.Spread.Sheets.Style();

style.name='style1';

style.backColor='red';

//add to sheet's named style collection.

sheet.addNamedStyle(style);

//add to spread's named style collection.

spread.addNamedStyle(style)

当名称样式添加到表单名称样式集合中后, 可以通过样式的名称找到它:

sheet.getNamedStyle('style1');

spread.getNamedStyle('style1')

如果名称样式不再使用, 你也可以将其从名称集合中删除掉:

sheet.removeNamedStyle('style1');

spread.removeNamedStyle('style1')

自定义Excel文件样式的示例源码：style.html

五、数据绑定

Spread.Sheets 支持绑定数据源到表单（绑定类型有表单级别绑定和单元格级别绑定两种。)

你可以使用 setDataSource 和 getDataSource 方法来设置获取数据源。在设置数据源之前，你可以使用 autoGenerateColumns 方法来控制是否自动生成绑定列。例如：

var customers=[

{ ID:0, Name:'A', Info1:'Info0' },

{ ID:1, Name:'B', Info1:'Info1' },

{ ID:2, Name:'C', Info1:'Info2' },

];

sheet.autoGenerateColumns=true;

sheet.setDataSource(customers);

你也可以使用 getDataItem 方法来获取指定行的数据信息。

你按照如下方式将数据字段绑定到指定的列：

var datasource=[

{ name: 'Alice', age: 27, birthday: '1985/08/31', position: 'PM' }

];

// bindColumn one by one

var nameColInfo={ name: 'name', displayName: 'Display Name', size: 70 };

var ageColInfo={ name: 'age', displayName: 'Age', size: 40, resizable: false };

var birthdayColInfo={ name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 };

var positionColInfo={ name: 'position', displayName: 'Position', size: 50, visible: false };

sheet.autoGenerateColumns=false;

sheet.setDataSource(datasource);

sheet.bindColumn(0, nameColInfo);

sheet.bindColumn(1, birthdayColInfo);

sheet.bindColumn(2, ageColInfo);

sheet.bindColumn(3, positionColInfo);

// or use bindColumns to bind all custom columns

var colInfos=[

{ name: 'position', displayName: 'Position', size: 50, visible: false },

{ name: 'name', displayName: 'Display Name', size: 70 },

{ name: 'birthday', displayName: 'Birthday', formatter: 'd/M/yy', size: 120 },

{ name: 'age', displayName: 'Age', size: 40, resizable: false },

];

sheet.autoGenerateColumns=false;

sheet.setDataSource(datasource);

sheet.bindColumns(colInfos);

数据绑定的示例源码：sheetLevelBinding.html

以上就是使用 SpreadJS，实现前端导入和导出 excel 文件的具体步骤和示例代码，其他如 Excel 公式、图表、条件格式、JSON 序列化与反序列化、状态栏等功能，可以在 SpreadJS 官网了解更多。

点击了解更多可查看本文在线 DEMO 示例。

关于葡萄城
赋能开发者！葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和政府机构广泛应用

在三菱works2全部标签中建立标签导出.csv格式文件，在

EBPro中按照下列操作步骤导入.csv格式文件

Step 1.

在works2中新建地址标签

1、选择全局标签->填写标签名称和数据类型->填写软元件地址->选择中标签行->预约

2、查看登记标签中系统标签关联公开->全局标签->写入至CSV

Step 2.

导入标签

1、新建HMI工程文件->添加三菱L/Q网口驱动->导入标签->选中导.csv格式文件

2、选择标签地址

何将CSV文件导入IZYTRONIQ？

初次注册时认证IZYTRONIQ

当您购买 IZYTRONIQ 软件后，您会通过邮件收到一个注册码或者如果您买的仪器含有软件，这个注册码会附在随机来的绿色信封内。

01、在 https://reg.izytron.com/网址下使用您收到的注册码进行注册

02、然后大约15分钟左右您的邮箱将会收到一个认证码

03、http://download.izytron.com/网址下载IZYTRONIQ 软件

04、进行安装

05、初次启动软件时输入认证码

注册码样式: xxxx-xxxx-xxxx

认证码样式: xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx

对于线下认证方式请参考软件说明书。

将CSV文件导入IZYTRONIQ

为了将CSV 文件导入IZYTRONIQ, 文件需要符合一定格式。

首先导出一个空白的文件, 这个文件可以用来填报数据或者再次导入。

请按如下步骤顺序操作。

生成一个正确的电子表格:

01、打开IZYTRONIQ, 导航至 [Portable Objects] -> [Enter, Change, Lists]。

02、点击 [Add Element] 然后在数据库中创建一个 [Customer] 及[Device]。

03、点击 [Portable Objects] -> [Export]。

04、选择保存格式 [CSV File] 及想要保存的位置, 然后点击确认导出。

05、选中这个新创建的的customer 然后点击 [Export to CSV File]。

在CSV文件中填入主数据:

1. 打开这个新建的CSV文件. [CustomerID] 必须在 A1窗口呈现。

2. 根据实际情况填写主数据。

请按如下语法结构进行填写:

LastTestingDate: 请安这样的格式: DD.MM.YYYY填写一个日期。

LastTestingResult: 请填写 “passed” 或者“NotPassed”。

TestingInterval: 请填入一个数值代表测试周期(比如“12”)

IsActive: 请填写“True” 或者 “False”。

必须填写的项目包括:

CustomerID, DeviceType, ID 及 Designation

保存: 点击并按如下格式保存——CSV(MS-DOS)(*.csv).

示例:

注意: 如果表格中ID numbers有前置零的命名（如0001）, 请确保所有单元保存的格式为TEXT – 否则在保存时这些零会被默认去除。

导入已修改完毕的CSV 文件:

01、打开 IZYTRONIQ 并点击 [Portable Objects] -> [Import]

02、选择[From File] 并选中刚才那个 CSV 文件

注意电子表格在未打开的状态才可操作!

03、点击[Import].

在线咨询

上一篇：运用 node-webkit将Web项目封装为PC客
下一篇：Storybook 4.0大升级：为RN提供一级支持

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

、SpreadJS 简介

二、前端导入导出Excel

三、处理单元格合并

四、自定义 Excel 的文件样式

五、数据绑定

您的项目需求