&

[點晴永久免費OA]使用純前端JavaScript 實現Excel IO

當前位置：點晴教程→點晴OA辦公管理信息系統 →『經驗分享&問題答疑』

admin

2020年5月1日 2:55 本文熱度 4598

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

具體要求包含

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

要求真多！

現在總算是完成了，于是將我的經驗分析出來。

經過小組探討，我們決定使用另外一款前端控件，叫做 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

該文章在 2020/5/1 2:55:26 編輯過


全部評論1
	admin 2020年5月1日 2:59 關于本篇的代碼：附件：xlsWijmo.rar 該評論在 2020/5/1 2:59:37 編輯過

關鍵字查詢

Excel

實現

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

[點晴永久免費OA]使用純前端JavaScript 實現Excel IO

Excel 導出

面積圖和柱狀圖

全部評論1