首页
所有分类
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 相关文章推荐
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
javascript 精粹笔记
May 09 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
小程序实现多选框功能
Oct 30 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
vue中是怎样监听数组变化的
Oct 24 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
字符集(1) name_scope (1) character(1) 2022年7月新番(1) 数据表(1) OVERLORD(1) data(4) variable_scope(1) mysql(6) 神经网络(7)
You might like
PHP 开发工具
2006/12/06 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
js确定对象类型方法
2012/03/30 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
详解Python高阶函数
2020/08/15 Python
python实现粒子群算法
2020/10/15 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
viagogo英国票务平台：演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
美国牛仔品牌：True Religion
2018/11/16 全球购物
Java程序员常见面试题
2015/07/16 面试题
管理科学大学生求职信
2013/11/13 职场文书
工地门卫岗位职责
2013/12/30 职场文书
水电工岗位职责
2014/02/12 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
会议接待欢迎标语
2014/10/08 职场文书
离婚协议书范文2015
2015/01/26 职场文书
感恩教育主题班会
2015/08/12 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
vue实现Toast组件轻提示
2022/04/10 Vue.js
Nginx利用Logrotate实现日志分割
2022/05/20 Servers