使用纯前端JavaScript实现Excel导入导出方法过程详解
公司最近要为某国企做一个**统计和管理系统，
具体要求包含
Excel导入导出根据导入的数据进行展示报表图表展示（包括柱状图，折线图，饼图），而且还要求要有动画效果，扁平化风格Excel导出，并要提供客户端来管理Excel 文件...
要求真多！
现在总算是完成了，于是将我的经验分析出来。
在整个项目架构中，首先就要解决Excel导入的问题。
由于公司没有自己的框架做Excel IO，就只有通过其他渠道了。
嗯，我在github上找到了一个开源库xlsx，通过npm方式来安装。
npm install xlsx --save
之后，在自己的html文件里面添加对js文件的引用
<script src="./node_modules/xlsx/dist/jszip.js"></script> <script src="./node_modules/xlsx/dist/xlsx.js"></script>
通过FileReader对象将数据以二进制字符串的方式加载到内存中，
target.addEventListener('drop', function (e) {
e.preventDefault();
handleDrop(e.dataTransfer.files[0]);
});
handleDrop = function(){
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
...
...
};
reader.readAsBinaryString(f);
}
然后我们下来的操作就是要利用库对data数据进行操作了。
它暴露了一个对象XLSX，通过XLSX的read（） 方法就可以将数据读为JSON对象了。
var workbook = XLSX.read(data, { type: 'binary' });
var sheetName = workbook.SheetNames[0];
var sheet = workbook.Sheets[sheetName];
之后，使用键值对的方式再把数据从sheet中取出来放到表格中。
var table = document.createElement('table');
for (var row = 1; ; row++) {
if (sheet['A' + row] == null) {
break;
}
var tr = document.createElement('tr');
for (var col = 65; col <= 90; col++) {
var c = String.fromCharCode(col);// get 'A', 'B', 'C' ...
var key = '' + c + row;
if (sheet[key] == null) {
break;
}
var td = document.createElement('td');
td.innerHTML = sheet[key]['w'];
tr.appendChild(td);
}
table.appendChild(tr);
}
document.querySelector('#target').appendChild(table);
下面是完整代码:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#target {
height: 400px;
width: 700px;
background-color: #f8f8f8;
margin: 200px auto;
overflow:hidden;
border-radius:5px;
box-shadow:2px 2px 5px #888;
}
.hover::before {
content: '请将excel文件拖到这里';
width: 100%;
height: 100%;
display: block;
text-align: center;
line-height: 400px;
font-size: 24px;
font-family: '微软雅黑';
}
#target>table{
height:250px;
width:400px;
border:1px solid #ccc;
border-radius:3px;
margin:75px auto;
}
#target>table td{
text-align:center;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
}
#target>table tr:first-child>td{
border-top:0px solid #ccc;
}
#target>table tr>td:first-child{
border-left:0px solid #ccc;
}
</style>
</head>
<body>
<div id="target" class="hover">
</div>
<script src="./node_modules/xlsx/dist/jszip.js"></script>
<script src="./node_modules/xlsx/dist/xlsx.js"></script>
<script src="index.js"></script>
</body>
</html>
下面是完整js代码
index.js
window.addEventListener('load', function () {
var target = document.querySelector('#target');
target.addEventListener('dragenter', function () {
this.classList.remove('hover');
});
target.addEventListener('dragleave', function () {
this.classList.add('hover');
});
target.addEventListener('dragover', function (e) {
this.classList.remove('hover');
e.preventDefault();
});
target.addEventListener('drop', function (e) {
e.preventDefault();
handleDrop(e.dataTransfer.files[0]);
});
});
var handleDrop = function (f) {
var reader = new FileReader(),
name = f.name;
reader.onload = function (e) {
var data = e.target.result,
workbook = XLSX.read(data, { type: 'binary' }),
sheetName = workbook.SheetNames[0],
sheet = workbook.Sheets[sheetName],
table = document.createElement('table');
for (var row = 1; ; row++) {
if (sheet['A' + row] == null) {
break;
}
var tr = document.createElement('tr');
for (var col = 65; col <= 90; col++) {
var c = String.fromCharCode(col);// get 'A', 'B', 'C' ...
var key = '' + c + row;
if (sheet[key] == null) {
break;
}
var td = document.createElement('td');
td.innerHTML = sheet[key]['w'];
tr.appendChild(td);
}
table.appendChild(tr);
}
document.querySelector('#target').appendChild(table);
};
reader.readAsBinaryString(f);
}
效果如下：
这样做好像可行，但是我们很快就放弃了。
弊端太多了。
这个库现在目前还处于开发阶段，在issues里面还有很多的Bug被提出。这没有办法保证最终网站的稳定性。这个库没有办法导入合并单元格的数据，只能是很死板的按照'A', 'B', 'C'... 和1, 2, 3 坐标来查询数据，而且它要求内部单元格不能为空。更比较不方便的就是，它没有行和列的计数的属性。由于这是为国企做的，所以无法将关键功能依赖于这个star量不是很多的库，降低风险，也是为了网站的安全性。...
经过小组探讨，我们决定使用另外一款前端控件，叫做 Wijmo。
首先，从网站上下载Wijmo包，这个控件没有提供npm和bower等方式。
然后将我需要的包导入进来
<script src="./wijmo/dist/controls/wijmo.min.js"></script> <script src="./wijmo/dist/controls/wijmo.grid.min.js"></script> <script src="./wijmo/dist/controls/wijmo.grid.detail.min.js"></script> <script src="./wijmo/dist/controls/wijmo.grid.xlsx.min.js"></script> <script src="./wijmo/dist/controls/wijmo.xlsx.min.js"></script>
此外，还有引入一个jszip的包，是使用js来解压压缩包的一个库。（由于MS的open xml技术，xlsx文件都可以解压成为xml文件，app.xml 里包含了主要的数据）。
<script src="./jszip.min.js"></script>
读取文件的操作和上面都是一样的
var handleDrop = function (file) {
var reader,
workbook;
if (file) {
reader = new FileReader;
reader.onload = function (e) {
workbook = new wijmo.xlsx.Workbook(),
workbook.load(reader.result);
};
reader.readAsDataURL(file);
}
}
通过
workbook = new wijmo.xlsx.Workbook(); workbook.load(reader.result);
这两行代码将excel文件加载到内存 中的workbook对象。
打印workbook对象，
打印这个对象发现，workbook里面包含sheets数组，每个sheet包含rows数组，每个row包含cells数组，每个cell里面vaule属性就是单元格的值。
这简直太又好了
下面实现一个函数 getCollectionView ，以对象数组的方式来获取数据
var getCollectionView = function (workbook) {
var collectionView = [];
if (workbook) {
var sheet = workbook.sheets[0],
header = []; // 列标题数组
for (var i = 0, length = sheet.rows.length; i < length; i++) {
var row = sheet.rows[i],
rowArray = {};
for (var j = 0, jLength = row.cells.length; j < jLength; j++) {
var cell = row.cells[j];
// 如果是第一行数据，那么是作为列标题出现的，就放进标题数组中
if (i === 0) {
header.push(cell.value);
}
else {
// 后面的行数组，就作为rowArray对象的属性存储，属性名就是该列的标题。
rowArray[header[j]] = cell.value;
}
}
if (i !== 0) {
collectionView.push(rowArray);
}
}
}
return collectionView;
}
然后需要一个表格将数据呈现出来，这里我直接使用了Wijmo的FlexGrid表格。
gridDiv = document.createElement('div');
gridDiv.classList.add('grid');
dataGrid = new wijmo.grid.FlexGrid(gridDiv);// 通过传入容器构造一个FlexGrid表单。
var collectionView = new wijmo.collections.CollectionView(getCollectionView(workbook));
dataGrid.itemsSource = collectionView;
好了，经过上面几个步骤，导入Excel到表格已经实现了
这是完整的js代码：
index.js
(function () {
var dataGrid = null,
gridDiv = null,
workbook = null;
window.addEventListener('load', function () {
gridDiv = document.createElement('div');
gridDiv.classList.add('grid');
dataGrid = new wijmo.grid.FlexGrid(gridDiv);
var target = document.querySelector('#target');
target.addEventListener('dragenter', function (e) {
e.preventDefault();
this.classList.remove('hover');
});
target.addEventListener('dragleave', function (e) {
e.preventDefault();
this.classList.add('hover');
});
target.addEventListener('dragover', function (e) {
e.preventDefault();
this.classList.remove('hover');
});
target.addEventListener('drop', function (e) {
e.preventDefault();
handleDrop(e.dataTransfer.files[0]);
// 将这个表单添加到页面上
this.appendChild(gridDiv);
});
});
var handleDrop = function (file) {
var reader;
var workbook;
if (file) {
reader = new FileReader;
reader.onload = function (e) {
workbook = new wijmo.xlsx.Workbook();
workbook.load(reader.result);
var collectionView = new wijmo.collections.CollectionView(getCollectionView(workbook));
dataGrid.itemsSource = collectionView;
// console.log(dataGrid.collectionView);
};
reader.readAsDataURL(file);
}
}
var getCollectionView = function (workbook) {
var collectionView = [];
if (workbook) {
var sheet = workbook.sheets[0];
var title = [];
for (var i = 0, length = sheet.rows.length; i < length; i++) {
var row = sheet.rows[i];
var rowArray = {};
for (var j = 0, jLength = row.cells.length; j < jLength; j++) {
var cell = row.cells[j];
if (i === 0) {
header.push(cell.value);
}
else {
rowArray[header[j]] = cell.value;
}
}
if (i !== 0) {
collectionView.push(rowArray);
}
}
}
return collectionView;
}
})(window);
下面是效果
Excel 导出
欧了
两句代码实现Excel导出功能
wijmo.grid.xlsx.FlexGridXlsxConverter.save(dataGrid,
{ includeColumnHeaders: true }, fileName);
这个表格还支持过滤，分组，筛选，编辑。
面积图和柱状图
就在完成Excel IO 之后，发现这个控件包还可以做面积图，柱状图和其他很多类型的图形。
所以在这里就演示一个面积图的和一个柱状图的例子。
首先，要将包引进来。
<script src="./wijmo/dist/controls/wijmo.chart.min.js"></script>
然后经过下面几句代码，就可以使用在页面中插入一个柱状图
chart = new wijmo.chart.FlexChart('#chart');
chart.initialize({
itemsSource: collectionView,
bindingX: 'name',
options: {
groupWidth: 15
},
series: [
{ name: '年龄', binding: 'age' },
]
});
下面看效果
其中，颜色和柱状图的形状可以调整的。当鼠标移到元素上，还有会小提示。
在这里，只需要改变一下chart的类型，就可以切换为其他类型的图表
chart.chartType = chart.chartType === wijmo.chart.ChartType.Column ? wijmo.chart.ChartType.Area : wijmo.chart.ChartType.Column;
关于本篇的代码已经上传http://xiazai.jb51.net/202008/yuanma/xlsWijmo_jb51.rar;
后续会托管到github.
最终还是比较快的完成了任务。
关于这个项目的Excel IO 就简单介绍到这里，这个项目现在已经完成了，后续会分享一些其他的技术细节。
希望可以对你提供帮助。
到此这篇关于使用纯前端JavaScript实现Excel导入导出方法过程详解的文章就介绍到这了,更多相关JavaScript实现Excel导入导出内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
详解JS模块导入导出
开发中基本不会将所有的业务逻辑代码放在一个JS文件中,特别是在使用前端框架,进行组件化开发中时,会复用相应的组件.这时,就会用到模块导入/导出的方法了. 当然,上面提到有模块的概念,也是在JS用于服务器端编程的时候才会出现,我们在使用前端框架时,使用npm run dev,不就是启动了一个node服务. 对于JavaScript模块化编程的起源可以追溯到2009年,Ryan Dahl在github上发布了node 的最初版本. 本文主要介绍几种模块导入/导出的方法. node 中模块导出/导入
-
JS module的导出和导入的实现代码
最近看了些Vue框架写的程序,发现自己的前端知识还停留在几年以前,发现现在Javascript程序里有各种各样的对module的导入和到处,导入乍一看跟python的语法挺像的无非就是把from和import这两个关键词的使用颠倒了一下顺序.仔细看下来还是和python挺不一样的import模块的前提是模块有导出,并且还分默认导出和命名导出,有些麻烦.所以今天这篇文章就把所有的export形式和相应的import使用汇总一下. ES6在语言标准的层面上,实现了模块功能,成为浏览器和服务器通用的模
-
js导入导出excel(实例代码)
导入: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>Untitled Page</title></head><script language="javascript" type="text/javascript">function importXLS(fileName){
-
使用纯前端JavaScript实现Excel导入导出方法过程详解
公司最近要为某国企做一个**统计和管理系统, 具体要求包含 Excel导入导出根据导入的数据进行展示报表图表展示(包括柱状图,折线图,饼图),而且还要求要有动画效果,扁平化风格Excel导出,并要提供客户端来管理Excel 文件... 要求真多! 现在总算是完成了,于是将我的经验分析出来. 在整个项目架构中,首先就要解决Excel导入的问题. 由于公司没有自己的框架做Excel IO,就只有通过其他渠道了. 嗯,我在github上找到了一个开源库xlsx,通过npm方式来安装. npm inst
-
SpringBoot集成POI实现Excel导入导出的示例详解
目录 知识准备 什么是POI POI中基础概念 实现案例 Pom依赖 导出Excel 导入Excel 示例源码 知识准备 需要了解POI工具,以及POI对Excel中的对象的封装对应关系. 什么是POI Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程序对Microsoft Office格式档案读和写的功能.POI为“Poor Obfuscation Implementation”的首字母缩写,意为“简洁版的模糊实现”. A
-
JavaScript复制变量三种方法实例详解
这篇文章主要介绍了JavaScript复制变量三种方法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 直接将一个变量赋给另一个变量时,系统并不会创造一个新的变量,而是将原变量的地址赋给了新变量名.举个栗子: 复制代码 复制代码 let obj = { a: 1, b: 2, }; let copy = obj; obj.a = 5; console.log(copy.a); // Result // a = 5; // 更改obj的值,
-
Android Studio3.6.3 当前最新版本数据库查找与导出方法(图文详解)
一.SQLite安装包准备 本文章主要是针对安装了Android Studio 3.6.3 版本(Android Studio以下简称为AS)所做的SQLite教程, 博主这边安装的是 , 由于SQL语言基本大同小异,仅仅是管理数据库的软件不大相同,所以说数据库使用方法类似,具体安装流程参考网络上其他文章,本文暂不提供安装流程,安装完毕即可. 二.重中之重----Android Studio 3.0 版本起弃用了之前使用的ADM 博主也是刚发现自AS 3.0 开始弃用 Android Devic
-
Python破解excel进入密码的过程详解
目录 一.excel进入密码 二.密码解除思路 三.python 1.conf.ini 2.crack.py 一.excel进入密码 加密算法cipher Algorithm=“AES” AES加密算法的详细介绍与实现 二.密码解除思路 通过排列组合的方式进行查找 注意:此方法比较考验对密码字典的选取,且耗费时间较长,仅供参考学习!! 文件夹如图所示: 将待破解的文件放到excel文件夹中. 三.python 1.conf.ini 将准备好的密码字典添加到conf.ini中password后面,
-
纯前端JavaScript实现Excel IO案例分享
公司最近要为某国企做一个**统计和管理系统, 具体要求包含 •Excel导入导出 •根据导入的数据进行展示报表 •图表展示(包括柱状图,折线图,饼图),而且还要求要有动画效果,扁平化风格 •Excel导出,并要提供客户端来管理Excel 文件 •... 要求真多! 现在总算是完成了,于是将我的经验分析出来. -------------------------------------------------------------------------------- 在整个项目架构中,
-
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
1.简介 本文主要给大家介绍了关于Laravel 5用Laravel Excel实现Excel/CSV文件导入导出的相关内容,下面话不多说了,来一起看看详细的介绍吧. Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel ,从而方便我们以优雅的.富有表现力的代码实现Excel/CSV文件的导入和 导出 . 该项目的GitHub地址是: https://github.com/Maatwebsite/Laravel-Excel. 本地下载地址:h
-
mysqldump备份还原和mysqldump导入导出语句大全详解
MYSQLdump参数详解 mysqldump备份: 复制代码 代码如下: mysqldump -u用户名 -p密码 -h主机 数据库 a -w "sql条件" –lock-all-tables > 路径 mysqldump还原: 复制代码 代码如下: mysqldump -u用户名 -p密码 -h主机 数据库 < 路径 mysqldump按条件导出: 复制代码 代码如下: mysqldump -u用户名 -p密码 -h主机 数据库 a –where "条件语句&
-
Linux下Oracle如何导入导出dmp文件详解
前言 对于本机安装了oracle 客户端,下述命令都可以在 dos 执行,当然 dmp 文件导出在本地. 但在实际研发时,没人愿意在本机上安装庞大的 oracle 软件,这时你需要使用 Xshell/puTTY.. 远程工具连接到 Linux 进行操作,进行 Linux 上 dmp 文件的导入导出. 正文 a. 将用户 system 用户表导出到指定路径 D 盘 exp system/password@SID file=d:/daochu.dmp full=y b. 将用户 system 与 s
-
java解析Excel文件的方法实例详解
目录 介绍 1.1 pom依赖 1.2 将数据流转化为可解析的Workbook类型文件 1.3 解析 1.4 Controller层接收前端传递的Excel文件(前端使用Element-ui的<el-upload>组件) 1.5 ServiceIMPL层解析Excel文件并将解析结果返回 1.6 前端VUE实现Excel文件的上传(使用Element-ui的<el-upload>组件) 总结 在做一个项目时,有很多原本保存在Excel文件中的基础数据,如此则需要一个Excel文件解