狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

[點晴永久免費OA]使用純前端JavaScript 實現(xiàn)Excel IO

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

公司最近要為某國企做一個**統(tǒng)計和管理系統(tǒng),

具體要求包含

  • Excel導(dǎo)入導(dǎo)出
  • 根據(jù)導(dǎo)入的數(shù)據(jù)進行展示報表
  • 圖表展示(包括柱狀圖,折線圖,餅圖),而且還要求要有動畫效果,扁平化風(fēng)格
  • Excel導(dǎo)出,并要提供客戶端來管理Excel 文件
  • ...

要求真多!

現(xiàn)在總算是完成了,于是將我的經(jīng)驗分析出來。


經(jīng)過小組探討,我們決定使用另外一款前端控件,叫做 Wijmo

首先,從網(wǎng)站上下載Wijmo包,這個控件沒有提供npm和bower等方式。


然后將我需要的包導(dǎo)入進來

<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技術(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對象。

打印workbook對象,


打印這個對象發(fā)現(xiàn),workbook里面包含sheets數(shù)組,每個sheet包含rows數(shù)組,每個row包含cells數(shù)組,每個cell里面vaule屬性就是單元格的值。
這簡直太又好了

下面實現(xiàn)一個函數(shù) getCollectionView ,以對象數(shù)組的方式來獲取數(shù)據(jù)

var getCollectionView = function (workbook) {
    var collectionView = [];
    if (workbook) {
        var sheet = workbook.sheets[0],
            header = []; // 列標題數(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ù),那么是作為列標題出現(xiàn)的,就放進標題數(shù)組中
                if (i === 0) {
                    header.push(cell.value);
                }
                else {
                    // 后面的行數(shù)組,就作為rowArray對象的屬性存儲,屬性名就是該列的標題。
                    rowArray[header[j]] = cell.value;
                }
            }
            if (i !== 0) {
                collectionView.push(rowArray);
            }
        }
    }
    return collectionView;
} 

然后需要一個表格將數(shù)據(jù)呈現(xiàn)出來,這里我直接使用了Wijmo的FlexGrid表格。


gridDiv = document.createElement(''div'');
gridDiv.classList.add(''grid'');
dataGrid = new wijmo.grid.FlexGrid(gridDiv);// 通過傳入容器構(gòu)造一個FlexGrid表單。
var collectionView = new wijmo.collections.CollectionView(getCollectionView(workbook));
dataGrid.itemsSource = collectionView;

好了,經(jīng)過上面幾個步驟,導(dǎo)入Excel到表格已經(jīng)實現(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]);
            // 將這個表單添加到頁面上
            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)出

歐了

兩句代碼實現(xiàn)Excel導(dǎo)出功能

wijmo.grid.xlsx.FlexGridXlsxConverter.save(dataGrid,
    { includeColumnHeaders: true }, fileName);

這個表格還支持過濾,分組,篩選,編輯。


面積圖和柱狀圖

就在完成Excel IO 之后,發(fā)現(xiàn)這個控件包還可以做面積圖,柱狀圖和其他很多類型的圖形。

所以在這里就演示一個面積圖的和一個柱狀圖的例子。

首先,要將包引進來。

<script src="./wijmo/dist/controls/wijmo.chart.min.js"></script>

然后經(jīng)過下面幾句代碼,就可以使用在頁面中插入一個柱狀圖

chart = new wijmo.chart.FlexChart(''#chart'');
chart.initialize({
    itemsSource: collectionView,
    bindingX: ''name'',
    options: {
        groupWidth: 15
    },
    series: [
        { name: ''年齡'', binding: ''age'' },
    ]
});

下面看效果

 

其中,顏色和柱狀圖的形狀可以調(diào)整的。當(dāng)鼠標移到元素上,還有會小提示。

在這里,只需要改變一下chart的類型,就可以切換為其他類型的圖表

chart.chartType = chart.chartType === wijmo.chart.ChartType.Column ?
    wijmo.chart.ChartType.Area :
    wijmo.chart.ChartType.Column;


關(guān)于本篇的代碼已經(jīng)上傳 http://files.cnblogs.com/files/likeFlyingFish/xlsWijmo.rar;
后續(xù)會托管到github.

最終還是比較快的完成了任務(wù)。

關(guān)于這個項目的Excel IO 就簡單介紹到這里,這個項目現(xiàn)在已經(jīng)完成了,后續(xù)會分享一些其他的技術(shù)細節(jié)。

希望可以對你提供幫助。

本文轉(zhuǎn)自:http://www.cnblogs.com/likeFlyingFish/p/5794467.html


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

全部評論1

admin
2020年5月1日 2:59
關(guān)于本篇的代碼:
附件:xlsWijmo.rar

該評論在 2020/5/1 2:59:37 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運作、調(diào)度、堆場、車隊、財務(wù)費用、相關(guān)報表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點,圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務(wù)都免費,不限功能、不限時間、不限用戶的免費OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved