公司最近要為某國企做一個(gè)**統(tǒng)計(jì)和管理系統(tǒng)，
具體要求包含
- Excel導(dǎo)入導(dǎo)出
- 根據(jù)導(dǎo)入的數(shù)據(jù)進(jìn)行展示報(bào)表
- 圖表展示（包括柱狀圖，折線圖，餅圖），而且還要求要有動(dòng)畫效果，扁平化風(fēng)格
- Excel導(dǎo)出，并要提供客戶端來管理Excel 文件
- ...
要求真多！
現(xiàn)在總算是完成了，于是將我的經(jīng)驗(yàn)分析出來。
經(jīng)過小組探討，我們決定使用另外一款前端控件，叫做 Wijmo。
首先，從網(wǎng)站上下載Wijmo包，這個(gè)控件沒有提供npm和bower等方式。
1.png)
然后將我需要的包導(dǎo)入進(jìn)來
<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來解壓壓縮包的一個(gè)庫。（由于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);
}
}
通過
workbook = new wijmo.xlsx.Workbook();
workbook.load(reader.result);
這兩行代碼將excel文件加載到內(nèi)存 中的workbook對(duì)象。
打印workbook對(duì)象，
1.png)
打印這個(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ù)組的方式來獲取數(shù)據(jù)
var getCollectionView = function (workbook) {
var collectionView = [];
if (workbook) {
var sheet = workbook.sheets[0],
header = [];
然后需要一個(gè)表格將數(shù)據(jù)呈現(xiàn)出來，這里我直接使用了Wijmo的FlexGrid表格。
gridDiv = document.createElement(''div'');
gridDiv.classList.add(''grid'');
dataGrid = new wijmo.grid.FlexGrid(gridDiv);
好了，經(jīng)過上面幾個(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]);
400 186 1886
