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

使用纯前端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实现Excel导入导出方法过程详解

- Author -

小精灵儿Pawn

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

Javascript 相关文章推荐
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
纯js实现手风琴效果
Apr 17 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
JavaScript 数组去重详解
Sep 15 Javascript
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
浅谈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
DBLink(1) 复读(1) 事务并发(1) 幻读(5) GZIP(2) .NET Framework(2) 间隙锁(2) IIS7(1) MVCC(4) innoDB(3)
You might like
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
PHP时间和日期函数详解
2015/05/08 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
utf8的编码算法 转载
2006/12/27 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js document.write()使用介绍
2014/02/21 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
javascript基本算法汇总
2016/03/09 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
pandas中去除指定字符的实例
2018/05/18 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
Python目录和文件处理总结详解
2019/09/02 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
设计师家具购买和委托在线市场：Viyet
2016/11/16 全球购物
StubHub新加坡：购买和出售全球活动门票
2017/03/10 全球购物
北美领先的智能产品购物网站：Wellbots
2018/06/11 全球购物
CHARLES & KEITH英国官网：新加坡时尚品牌
2018/07/04 全球购物
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
社区志愿者培训方案
2014/06/10 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2014年团支部工作总结
2014/11/17 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server