使用純前端JavaScript 實現Excel IO

時間 2019-11-07

標籤使用前端 javascript 實現 excel 欄目 JavaScript 简体版

原文原文鏈接

公司最近要爲某國企作一個**統計和管理系統，javascript

具體要求包含html

Excel導入導出
根據導入的數據進行展現報表
圖表展現（包括柱狀圖，折線圖，餅圖），並且還要求要有動畫效果，扁平化風格
Excel導出，並要提供客戶端來管理Excel 文件
...

要求真多！前端

如今總算是完成了，因而將個人經驗分析出來。java

在整個項目架構中，首先就要解決Excel導入的問題。node

因爲公司沒有本身的框架作Excel IO，就只有經過其餘渠道了。git

嗯，我在github上找到了一個開源庫xlsx，經過npm方式來安裝。github

npm install xlsx --save

以後，在本身的html文件裏面添加對js文件的引用shell

<script src="./node_modules/xlsx/dist/jszip.js"></script>
<script src="./node_modules/xlsx/dist/xlsx.js"></script>

經過FileReader對象將數據以二進制字符串的方式加載到內存中，npm

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 就簡單介紹到這裏，這個項目如今已經完成了，後續會分享一些其餘的技術細節。

但願能夠對你提供幫助。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。