使用纯前端JavaScript实现Excel导入导出方法过程详解


Posted in Javascript onAugust 07, 2020

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

具体要求包含

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导入导出方法过程详解

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

弊端太多了。

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

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

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

使用纯前端JavaScript实现Excel导入导出方法过程详解

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

<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导入导出方法过程详解

打印这个对象发现,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导入导出方法过程详解

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导入导出方法过程详解

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

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

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

使用纯前端JavaScript实现Excel导入导出方法过程详解

关于本篇的代码已经上传http://xiazai.3water.com/202008/yuanma/xlsWijmo_3water.rar;
后续会托管到github.

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

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

希望可以对你提供帮助。

到此这篇关于使用纯前端JavaScript实现Excel导入导出方法过程详解的文章就介绍到这了,更多相关JavaScript实现Excel导入导出内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
vue注册组件的几种方式总结
Mar 08 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 #Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 #Javascript
javascript解析json格式的数据方法详解
Aug 07 #Javascript
Vue触发input选取文件点击事件操作
Aug 07 #Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 #Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 #Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 #Javascript
You might like
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
详细解析Python当中的数据类型和变量
2015/04/25 Python
树莓派实现移动拍照
2019/06/22 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
python 实现控制鼠标键盘
2020/11/27 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
企业年会主持词
2014/03/27 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
亲情作文之母爱
2019/09/25 职场文书