首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 26, 2016

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

具体要求包含
 •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);
}

效果如下：

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

这样做好像可行，但是我们很快就放弃了。 
弊端太多了。
 •这个库现在目前还处于开发阶段，在issues里面还有很多的Bug被提出。这没有办法保证最终网站的稳定性。
 •这个库没有办法导入合并单元格的数据，只能是很死板的按照'A', 'B', 'C'... 和1, 2, 3 坐标来查询数据，而且它要求内部单元格不能为空。
 •更比较不方便的就是，它没有行和列的计数的属性。
 •由于这是为国企做的，所以无法将关键功能依赖于这个star量不是很多的库，降低风险，也是为了网站的安全性。
 •...
 
--------------------------------------------------------------------------------

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

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

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

<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对象

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

打印这个对象发现，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);

下面是效果

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

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' },
 ]
});

下面看效果

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

其中，颜色和柱状图的形状可以调整的。当鼠标移到元素上，还有会小提示。 

在这里，只需要改变一下chart的类型，就可以切换为其他类型的图表 

chart.chartType = chart.chartType === wijmo.chart.ChartType.Column ?
 wijmo.chart.ChartType.Area :
 wijmo.chart.ChartType.Column;

关于本篇的代码已经上传 http://xiazai.3water.com/201608/yuanma/js-xlsWijmo-IO(3water.com).rar

后续会托管到github.

最终还是比较快的完成了任务。 

关于这个项目的Excel IO 就简单介绍到这里，这个项目现在已经完成了，后续会分享一些其他的技术细节。 

希望可以对你提供帮助。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

胖乎乎的小奶油

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript类和继承 constructor属性
Mar 04 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
Bootstrap基础学习
Jun 16 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 #Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 #Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 #Javascript
谈谈JavaScript的New关键字
Aug 26 #Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 #Javascript
针对JavaScript中this指向的简单理解
Aug 26 #Javascript
轻松掌握JavaScript代理模式
Aug 26 #Javascript
swing(1) cudn(1) webpack(1) OpenFeign(1) calc(1) SandBox(1) cudnn(1) RTX 3050 ti(1) callback(1) Git(3)
You might like
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Javascript 继承实现例子
2009/08/12 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
vuejs如何配置less
2017/04/25 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
[01:32]TI珍贵瞬间系列（一）
2020/08/26 DOTA
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python中异常重试的解决方案详解
2017/05/05 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
Under Armour安德玛英国官网：美国高端运动科技品牌
2018/09/17 全球购物
英国男女豪华配饰和礼品网站：Black.co.uk
2020/02/28 全球购物
Wiggle澳大利亚：自行车、跑步、游泳商店
2020/11/07 全球购物
网络编辑求职信
2014/04/30 职场文书
2014年英语工作总结
2014/12/20 职场文书
谢师宴邀请函
2015/02/02 职场文书
如何书写你的职业生涯规划书？
2019/06/27 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript