使用純前端JavaScript實現Excel導入導出方法過程詳解
公司最近要為某國企做一個**統計和管理系統，
具體要求包含
Excel導入導出根據導入的數據進行展示報表圖表展示（包括柱狀圖，折線圖，餅圖），而且還要求要有動畫效果，扁平化風格Excel導出，并要提供客戶端來管理Excel 文件...
要求真多！
現在總算是完成了，于是將我的經驗分析出來。
在整個項目架構中，首先就要解決Excel導入的問題。
由于公司沒有自己的框架做Excel IO，就只有通過其他渠道了。
嗯，我在github上找到了一個開源庫xlsx，通過npm方式來安裝。
npm install xlsx --save
之后，在自己的html文件里面添加對js文件的引用
<script src='http://www.b3g6.com/bcjs/node_modules/xlsx/dist/jszip.js'></script><script src='http://www.b3g6.com/bcjs/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 class='hover'> </div> <script src='http://www.b3g6.com/bcjs/node_modules/xlsx/dist/jszip.js'></script> <script src='http://www.b3g6.com/bcjs/node_modules/xlsx/dist/xlsx.js'></script> <script src='http://www.b3g6.com/bcjs/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);}
效果如下：
這樣做好像可行，但是我們很快就放棄了。
弊端太多了。
這個庫現在目前還處于開發階段，在issues里面還有很多的Bug被提出。這沒有辦法保證最終網站的穩定性。這個庫沒有辦法導入合并單元格的數據，只能是很死板的按照’A’, ’B’, ’C’... 和1, 2, 3 坐標來查詢數據，而且它要求內部單元格不能為空。更比較不方便的就是，它沒有行和列的計數的屬性。由于這是為國企做的，所以無法將關鍵功能依賴于這個star量不是很多的庫，降低風險，也是為了網站的安全性。...
經過小組探討，我們決定使用另外一款前端控件，叫做 Wijmo。
首先，從網站上下載Wijmo包，這個控件沒有提供npm和bower等方式。
然后將我需要的包導入進來
<script src='http://www.b3g6.com/bcjs/wijmo/dist/controls/wijmo.min.js'></script><script src='http://www.b3g6.com/bcjs/wijmo/dist/controls/wijmo.grid.min.js'></script><script src='http://www.b3g6.com/bcjs/wijmo/dist/controls/wijmo.grid.detail.min.js'></script><script src='http://www.b3g6.com/bcjs/wijmo/dist/controls/wijmo.grid.xlsx.min.js'></script><script src='http://www.b3g6.com/bcjs/wijmo/dist/controls/wijmo.xlsx.min.js'></script>
此外，還有引入一個jszip的包，是使用js來解壓壓縮包的一個庫。（由于MS的open xml技術，xlsx文件都可以解壓成為xml文件，app.xml 里包含了主要的數據）。
<script src='http://www.b3g6.com/bcjs/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導出功能
wijmo.grid.xlsx.FlexGridXlsxConverter.save(dataGrid,{ includeColumnHeaders: true }, fileName);
這個表格還支持過濾，分組，篩選，編輯。
面積圖和柱狀圖
就在完成Excel IO 之后，發現這個控件包還可以做面積圖，柱狀圖和其他很多類型的圖形。
所以在這里就演示一個面積圖的和一個柱狀圖的例子。
首先，要將包引進來。
<script src='http://www.b3g6.com/bcjs/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’ }, ]});
下面看效果
其中，顏色和柱狀圖的形狀可以調整的。當鼠標移到元素上，還有會小提示。
在這里，只需要改變一下chart的類型，就可以切換為其他類型的圖表
chart.chartType = chart.chartType === wijmo.chart.ChartType.Column ? wijmo.chart.ChartType.Area : wijmo.chart.ChartType.Column;
關于本篇的代碼已經上傳http://xiazai.jb51.net/202008/yuanma/xlsWijmo_jb51.rar;后續會托管到github.
最終還是比較快的完成了任務。
關于這個項目的Excel IO 就簡單介紹到這里，這個項目現在已經完成了，后續會分享一些其他的技術細節。
希望可以對你提供幫助。
到此這篇關于使用純前端JavaScript實現Excel導入導出方法過程詳解的文章就介紹到這了,更多相關JavaScript實現Excel導入導出內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備