使用純前端JavaScript實(shí)現(xiàn)Excel導(dǎo)入導(dǎo)出方法過(guò)程詳解
公司最近要為某國(guó)企做一個(gè)**統(tǒng)計(jì)和管理系統(tǒng),
具體要求包含
Excel導(dǎo)入導(dǎo)出根據(jù)導(dǎo)入的數(shù)據(jù)進(jìn)行展示報(bào)表圖表展示(包括柱狀圖,折線(xiàn)圖,餅圖),而且還要求要有動(dòng)畫(huà)效果,扁平化風(fēng)格Excel導(dǎo)出,并要提供客戶(hù)端來(lái)管理Excel 文件...
要求真多!
現(xiàn)在總算是完成了,于是將我的經(jīng)驗(yàn)分析出來(lái)。
在整個(gè)項(xiàng)目架構(gòu)中,首先就要解決Excel導(dǎo)入的問(wèn)題。
由于公司沒(méi)有自己的框架做Excel IO,就只有通過(guò)其他渠道了。
嗯,我在github上找到了一個(gè)開(kāi)源庫(kù)xlsx,通過(guò)npm方式來(lái)安裝。
npm install xlsx --save
之后,在自己的html文件里面添加對(duì)js文件的引用
<script src="./node_modules/xlsx/dist/jszip.js"></script> <script src="./node_modules/xlsx/dist/xlsx.js"></script>
通過(guò)FileReader對(duì)象將數(shù)據(jù)以二進(jìn)制字符串的方式加載到內(nèi)存中,
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); }
然后我們下來(lái)的操作就是要利用庫(kù)對(duì)data數(shù)據(jù)進(jìn)行操作了。
它暴露了一個(gè)對(duì)象XLSX,通過(guò)XLSX的read() 方法就可以將數(shù)據(jù)讀為JSON對(duì)象了。
var workbook = XLSX.read(data, { type: 'binary' }); var sheetName = workbook.SheetNames[0]; var sheet = workbook.Sheets[sheetName];
之后,使用鍵值對(duì)的方式再把數(shù)據(jù)從sheet中取出來(lái)放到表格中。
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: '請(qǐng)將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); }
效果如下:
這樣做好像可行,但是我們很快就放棄了。
弊端太多了。
這個(gè)庫(kù)現(xiàn)在目前還處于開(kāi)發(fā)階段,在issues里面還有很多的Bug被提出。這沒(méi)有辦法保證最終網(wǎng)站的穩(wěn)定性。這個(gè)庫(kù)沒(méi)有辦法導(dǎo)入合并單元格的數(shù)據(jù),只能是很死板的按照'A', 'B', 'C'... 和1, 2, 3 坐標(biāo)來(lái)查詢(xún)數(shù)據(jù),而且它要求內(nèi)部單元格不能為空。更比較不方便的就是,它沒(méi)有行和列的計(jì)數(shù)的屬性。由于這是為國(guó)企做的,所以無(wú)法將關(guān)鍵功能依賴(lài)于這個(gè)star量不是很多的庫(kù),降低風(fēng)險(xiǎn),也是為了網(wǎng)站的安全性。...
經(jīng)過(guò)小組探討,我們決定使用另外一款前端控件,叫做 Wijmo。
首先,從網(wǎng)站上下載Wijmo包,這個(gè)控件沒(méi)有提供npm和bower等方式。
然后將我需要的包導(dǎo)入進(jìn)來(lái)
<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>
此外,還有引入一個(gè)jszip的包,是使用js來(lái)解壓壓縮包的一個(gè)庫(kù)。(由于MS的open xml技術(shù),xlsx文件都可以解壓成為xml文件,app.xml 里包含了主要的數(shù)據(jù))。
<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); } }
通過(guò)
workbook = new wijmo.xlsx.Workbook(); workbook.load(reader.result);
這兩行代碼將excel文件加載到內(nèi)存 中的workbook對(duì)象。
打印workbook對(duì)象,
打印這個(gè)對(duì)象發(fā)現(xiàn),workbook里面包含sheets數(shù)組,每個(gè)sheet包含rows數(shù)組,每個(gè)row包含cells數(shù)組,每個(gè)cell里面vaule屬性就是單元格的值。
這簡(jiǎn)直太又好了
下面實(shí)現(xiàn)一個(gè)函數(shù) getCollectionView ,以對(duì)象數(shù)組的方式來(lái)獲取數(shù)據(jù)
var getCollectionView = function (workbook) { var collectionView = []; if (workbook) { var sheet = workbook.sheets[0], header = []; // 列標(biāo)題數(shù)組 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]; // 如果是第一行數(shù)據(jù),那么是作為列標(biāo)題出現(xiàn)的,就放進(jìn)標(biāo)題數(shù)組中 if (i === 0) { header.push(cell.value); } else { // 后面的行數(shù)組,就作為rowArray對(duì)象的屬性存儲(chǔ),屬性名就是該列的標(biāo)題。 rowArray[header[j]] = cell.value; } } if (i !== 0) { collectionView.push(rowArray); } } } return collectionView; }
然后需要一個(gè)表格將數(shù)據(jù)呈現(xiàn)出來(lái),這里我直接使用了Wijmo的FlexGrid表格。
gridDiv = document.createElement('div'); gridDiv.classList.add('grid'); dataGrid = new wijmo.grid.FlexGrid(gridDiv);// 通過(guò)傳入容器構(gòu)造一個(gè)FlexGrid表單。 var collectionView = new wijmo.collections.CollectionView(getCollectionView(workbook)); dataGrid.itemsSource = collectionView;
好了,經(jīng)過(guò)上面幾個(gè)步驟,導(dǎo)入Excel到表格已經(jīng)實(shí)現(xiàn)了
這是完整的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]); // 將這個(gè)表單添加到頁(yè)面上 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 導(dǎo)出
歐了
兩句代碼實(shí)現(xiàn)Excel導(dǎo)出功能
wijmo.grid.xlsx.FlexGridXlsxConverter.save(dataGrid, { includeColumnHeaders: true }, fileName);
這個(gè)表格還支持過(guò)濾,分組,篩選,編輯。
面積圖和柱狀圖
就在完成Excel IO 之后,發(fā)現(xiàn)這個(gè)控件包還可以做面積圖,柱狀圖和其他很多類(lèi)型的圖形。
所以在這里就演示一個(gè)面積圖的和一個(gè)柱狀圖的例子。
首先,要將包引進(jìn)來(lái)。
<script src="./wijmo/dist/controls/wijmo.chart.min.js"></script>
然后經(jīng)過(guò)下面幾句代碼,就可以使用在頁(yè)面中插入一個(gè)柱狀圖
chart = new wijmo.chart.FlexChart('#chart'); chart.initialize({ itemsSource: collectionView, bindingX: 'name', options: { groupWidth: 15 }, series: [ { name: '年齡', binding: 'age' }, ] });
下面看效果
其中,顏色和柱狀圖的形狀可以調(diào)整的。當(dāng)鼠標(biāo)移到元素上,還有會(huì)小提示。
在這里,只需要改變一下chart的類(lèi)型,就可以切換為其他類(lèi)型的圖表
chart.chartType = chart.chartType === wijmo.chart.ChartType.Column ? wijmo.chart.ChartType.Area : wijmo.chart.ChartType.Column;
關(guān)于本篇的代碼已經(jīng)上傳http://xiazai.jb51.net/202008/yuanma/xlsWijmo_jb51.rar;
后續(xù)會(huì)托管到github.
最終還是比較快的完成了任務(wù)。
關(guān)于這個(gè)項(xiàng)目的Excel IO 就簡(jiǎn)單介紹到這里,這個(gè)項(xiàng)目現(xiàn)在已經(jīng)完成了,后續(xù)會(huì)分享一些其他的技術(shù)細(xì)節(jié)。
希望可以對(duì)你提供幫助。
到此這篇關(guān)于使用純前端JavaScript實(shí)現(xiàn)Excel導(dǎo)入導(dǎo)出方法過(guò)程詳解的文章就介紹到這了,更多相關(guān)JavaScript實(shí)現(xiàn)Excel導(dǎo)入導(dǎo)出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用原生javascript開(kāi)發(fā)計(jì)算器實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于如何使用原生javascript開(kāi)發(fā)計(jì)算器的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02兼容firefox的給每一個(gè)onClick再附加一個(gè)事件
如原來(lái)的onClick=="alert("a");",增加后變成onclick="alert("a");return false;"。 如果用腳本實(shí)現(xiàn)動(dòng)態(tài)增加上去? 謝謝!2008-07-07livereload工具實(shí)現(xiàn)前端可視化開(kāi)發(fā)【推薦】
本文將介紹一個(gè)工具--livereload。這是一款能根據(jù)你本地文件(html、css、js)的變化,自動(dòng)跟蹤刷新瀏覽器的實(shí)時(shí)刷新工具,有了這個(gè)工具,會(huì)大大減輕你刷新頁(yè)面的工作量。下面跟著小編一起來(lái)看下吧2016-12-12自定義函數(shù)實(shí)現(xiàn)IE7與IE8不兼容js中trim函數(shù)的問(wèn)題
這篇文章主要介紹了自定義函數(shù)實(shí)現(xiàn)IE7與IE8不兼容js中trim函數(shù)的方法,涉及trim函數(shù)的重寫(xiě)與正則匹配的技巧,需要的朋友可以參考下2015-02-02JS中Select下拉列表類(lèi)(支持輸入模糊查詢(xún))功能
這篇文章主要介紹了JS中Select下拉列表類(lèi)(支持輸入模糊查詢(xún))功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-01-01利用Bootstrap實(shí)現(xiàn)表格復(fù)選框checkbox全選
Bootstrap相信應(yīng)該不用多介紹,來(lái)自 Twitter,是目前最受歡迎的前端框架。這篇文章主要給大家介紹了如何利用Bootstrap實(shí)現(xiàn)表格中的checkbox復(fù)選框全選效果,文中給出詳細(xì)的介紹及完整的實(shí)例代碼,相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值,下面來(lái)一起看看吧。2016-12-12JavaScript?Generator異步過(guò)度的實(shí)現(xiàn)詳解
生成器Generator是JavaScript?ES6引入的特性,它讓我們可以分段執(zhí)行一個(gè)函數(shù)。但是在談?wù)撋善鳎℅enerator)之前,我們要先了解迭代器Iterator2022-08-08解決layer.open彈出框不能獲取input框的值為空的問(wèn)題
今天小編就為大家分享一篇解決layer.open彈出框不能獲取input框的值為空的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09