使用純前端JavaScript 實現Excel IO

本文轉載自查看原文 2016-08-25 14:26 24362 Excel/ Javascript

公司最近要為某國企做一個**統計和管理系統，

具體要求包含

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); }

效果如下：

這樣做好像可行，但是我們很快就放棄了。

弊端太多了。

這個庫現在目前還處於開發階段，在issues里面還有很多的Bug被提出。這沒有辦法保證最終網站的穩定性。
這個庫沒有辦法導入合並單元格的數據，只能是很死板的按照'A', 'B', 'C'... 和1, 2, 3 坐標來查詢數據，而且它要求內部單元格不能為空。
更比較不方便的就是，它沒有行和列的計數的屬性。
由於這是為國企做的，所以無法將關鍵功能依賴於這個star量不是很多的庫，降低風險，也是為了網站的安全性。
...

經過小組探討，我們決定使用另外一款前端控件，叫做 Wijmo。

首先，從網站上下載Wijmo包，這個控件沒有提供npm和bower等方式。

然后將我需要的包導入進來

<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對象，

打印這個對象發現，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="./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://files.cnblogs.com/files/likeFlyingFish/xlsWijmo.rar;
后續會托管到github.

最終還是比較快的完成了任務。

關於這個項目的Excel IO 就簡單介紹到這里，這個項目現在已經完成了，后續會分享一些其他的技術細節。

希望可以對你提供幫助。

本文轉自：http://www.cnblogs.com/likeFlyingFish/p/5794467.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用純前端JavaScript 實現Excel IO 如何使用JavaScript實現前端導入和導出excel文件如何使用JavaScript實現純前端讀取和導出excel文件如何使用JavaScript實現純前端讀取和導出excel文件【JavaScript】EventEmitter的前端實現使用js實現excel文件的上傳及渲染到前端頁面為table 關於前端使用JavaScript無法實現canvas打印問題的解決前端實現導出excel功能前端實現Excel的批量下載 Javascript實現前端簡單路由