频道导航

纯前端JavaScript实现Excel IO案例分享

2019-01-06 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了纯前端JavaScript实现Excel IO案例分享，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

公司最近要为某国企做一个**统计和管理系统，

具体要求包含 •Excel导入导出 •根据导入的数据进行展示报表 •图表展示（包括柱状图，折线图，饼图），而且还要求要有动画效果，扁平化风格 •Excel导出，并要提供客户端来管理Excel 文件 •...

要求真多！

现在总算是完成了，于是将我的经验分析出来。

--------------------------------------------------------------------------------

在整个项目架构中，首先就要解决Excel导入的问题。

由于公司没有自己的框架做Excel IO，就只有通过其他渠道了。

嗯，我在github上找到了一个开源库，通过npm方式来安装。
<script src="./node_modules/xlsx/dist/xlsx.js">
<script src="index.js">

下面是完整js代码 index.js

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','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','C'... 和1,2,3 坐标来查询数据，而且它要求内部单元格不能为空。 •更比较不方便的就是，它没有行和列的计数的属性。 •由于这是为国企做的，所以无法将关键功能依赖于这个star量不是很多的库，降低风险，也是为了网站的安全性。 •...

--------------------------------------------------------------------------------

经过小组探讨，我们决定使用另外一款前端控件，叫做。首先，从网站上下载Wijmo包，这个控件没有提供npm和bower等方式。

然后将我需要的包导入进来

此外，还有引入一个jszip的包，是使用js来解压压缩包的一个库。（由于MS的open xml技术，xlsx 文件都可以解压成为xml文件，app.xml 里包含了主要的数据）。读取文件的操作和上面都是一样的

if (file) {
reader = new FileReader;
reader.onload = function (e) {
workbook = new wijmo.xlsx.Workbook(),workbook.load(reader.result);
};
reader.readAsDataURL(file);
}
}

通过代码将excel文件加载到内存中的workbook对象。

打印workbook对象

打印这个对象发现，workbook里面包含sheets数组，每个sheet包含rows数组，每个row包含cells数组，每个cell里面vaule属性就是单元格的值。这简直太又好了

下面实现一个函数 getCollectionView ，以对象数组的方式来获取数据

标题数组

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表格。

好了，经过上面几个步骤，导入Excel到表格已经实现了

这是完整的js代码：

index.js

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);

下面是效果