这样做好像可行，但是我们很快就放弃了。
弊端太多了。
•这个库现在目前还处于开发阶段，在issues里面还有很多的Bug被提出。这没有办法保证最终网站的稳定性。
•这个库没有办法导入合并单元格的数据，只能是很死板的按照'A', 'B', 'C'... 和1, 2, 3 坐标来查询数据，而且它要求内部单元格不能为空。
•更比较不方便的就是，它没有行和列的计数的属性。
•由于这是为国企做的，所以无法将关键功能依赖于这个star量不是很多的库，降低风险，也是为了网站的安全性。
•...
--------------------------------------------------------------------------------
经过小组探讨，我们决定使用另外一款前端控件，叫做 Wijmo。
首先，从网站上下载Wijmo包，这个控件没有提供npm和bower等方式。
然后将我需要的包导入进来
<script src="https://www.jb51.net/article/wijmo/dist/controls/wijmo.min.js"></script> <script src="https://www.jb51.net/article/wijmo/dist/controls/wijmo.grid.min.js"></script> <script src="https://www.jb51.net/article/wijmo/dist/controls/wijmo.grid.detail.min.js"></script> <script src="https://www.jb51.net/article/wijmo/dist/controls/wijmo.grid.xlsx.min.js"></script> <script src="https://www.jb51.net/article/wijmo/dist/controls/wijmo.xlsx.min.js"></script>
此外，还有引入一个jszip的包，是使用js来解压压缩包的一个库。（由于MS的open xml技术，xlsx文件都可以解压成为xml文件，app.xml 里包含了主要的数据）。
<script src="https://www.jb51.net/article/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对象
打印这个对象发现，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);
下面是效果
Excel 导出
欧了
两句代码实现Excel导出功能