欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用純前端JavaScript實現(xiàn)Excel導(dǎo)入導(dǎo)出方法過程詳解

 更新時間:2020年08月07日 14:43:41   作者:小精靈兒Pawn  
這篇文章主要介紹了使用純前端JavaScript實現(xiàn)Excel導(dǎo)入導(dǎo)出方法過程詳解,文章通過示例代碼和圖文解析介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

具體要求包含

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

要求真多!

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

在整個項目架構(gòu)中,首先就要解決Excel導(dǎo)入的問題。

由于公司沒有自己的框架做Excel IO,就只有通過其他渠道了。

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

npm install xlsx --save

之后,在自己的html文件里面添加對js文件的引用

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

通過FileReader對象將數(shù)據(jù)以二進制字符串的方式加載到內(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);
}

然后我們下來的操作就是要利用庫對data數(shù)據(jù)進行操作了。

它暴露了一個對象XLSX,通過XLSX的read() 方法就可以將數(shù)據(jù)讀為JSON對象了。

var workbook = XLSX.read(data, { type: 'binary' });
var sheetName = workbook.SheetNames[0];
var sheet = workbook.Sheets[sheetName];

之后,使用鍵值對的方式再把數(shù)據(jù)從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);
}

效果如下:

這樣做好像可行,但是我們很快就放棄了。

弊端太多了。

這個庫現(xiàn)在目前還處于開發(fā)階段,在issues里面還有很多的Bug被提出。這沒有辦法保證最終網(wǎng)站的穩(wěn)定性。這個庫沒有辦法導(dǎo)入合并單元格的數(shù)據(jù),只能是很死板的按照'A', 'B', 'C'... 和1, 2, 3 坐標(biāo)來查詢數(shù)據(jù),而且它要求內(nèi)部單元格不能為空。更比較不方便的就是,它沒有行和列的計數(shù)的屬性。由于這是為國企做的,所以無法將關(guān)鍵功能依賴于這個star量不是很多的庫,降低風(fēng)險,也是為了網(wǎ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 = []; // 列標(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)的,就放進標(biāo)題數(shù)組中
        if (i === 0) {
          header.push(cell.value);
        }
        else {
          // 后面的行數(shù)組,就作為rowArray對象的屬性存儲,屬性名就是該列的標(biāo)題。
          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)鼠標(biāo)移到元素上,還有會小提示。

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

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ù)會托管到github.

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

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

希望可以對你提供幫助。

到此這篇關(guān)于使用純前端JavaScript實現(xiàn)Excel導(dǎo)入導(dǎo)出方法過程詳解的文章就介紹到這了,更多相關(guān)JavaScript實現(xiàn)Excel導(dǎo)入導(dǎo)出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 使用原生javascript開發(fā)計算器實例代碼

    使用原生javascript開發(fā)計算器實例代碼

    這篇文章主要給大家介紹了關(guān)于如何使用原生javascript開發(fā)計算器的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02
  • 兼容firefox的給每一個onClick再附加一個事件

    兼容firefox的給每一個onClick再附加一個事件

    如原來的onClick=="alert("a");",增加后變成onclick="alert("a");return false;"。 如果用腳本實現(xiàn)動態(tài)增加上去? 謝謝!
    2008-07-07
  • livereload工具實現(xiàn)前端可視化開發(fā)【推薦】

    livereload工具實現(xiàn)前端可視化開發(fā)【推薦】

    本文將介紹一個工具--livereload。這是一款能根據(jù)你本地文件(html、css、js)的變化,自動跟蹤刷新瀏覽器的實時刷新工具,有了這個工具,會大大減輕你刷新頁面的工作量。下面跟著小編一起來看下吧
    2016-12-12
  • 自定義函數(shù)實現(xiàn)IE7與IE8不兼容js中trim函數(shù)的問題

    自定義函數(shù)實現(xiàn)IE7與IE8不兼容js中trim函數(shù)的問題

    這篇文章主要介紹了自定義函數(shù)實現(xiàn)IE7與IE8不兼容js中trim函數(shù)的方法,涉及trim函數(shù)的重寫與正則匹配的技巧,需要的朋友可以參考下
    2015-02-02
  • JS中Select下拉列表類(支持輸入模糊查詢)功能

    JS中Select下拉列表類(支持輸入模糊查詢)功能

    這篇文章主要介紹了JS中Select下拉列表類(支持輸入模糊查詢)功能,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-01-01
  • 利用Bootstrap實現(xiàn)表格復(fù)選框checkbox全選

    利用Bootstrap實現(xiàn)表格復(fù)選框checkbox全選

    Bootstrap相信應(yīng)該不用多介紹,來自 Twitter,是目前最受歡迎的前端框架。這篇文章主要給大家介紹了如何利用Bootstrap實現(xiàn)表格中的checkbox復(fù)選框全選效果,文中給出詳細的介紹及完整的實例代碼,相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值,下面來一起看看吧。
    2016-12-12
  • JavaScript?Generator異步過度的實現(xiàn)詳解

    JavaScript?Generator異步過度的實現(xiàn)詳解

    生成器Generator是JavaScript?ES6引入的特性,它讓我們可以分段執(zhí)行一個函數(shù)。但是在談?wù)撋善鳎℅enerator)之前,我們要先了解迭代器Iterator
    2022-08-08
  • 解決layer.open彈出框不能獲取input框的值為空的問題

    解決layer.open彈出框不能獲取input框的值為空的問題

    今天小編就為大家分享一篇解決layer.open彈出框不能獲取input框的值為空的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JS異步代碼單元測試之神奇的Promise

    JS異步代碼單元測試之神奇的Promise

    這篇文章主要介紹了JS異步代碼單元測試之神奇的Promise,對異步感興趣的同學(xué),可以參考下
    2021-05-05
  • layui框架與SSM前后臺交互的方法

    layui框架與SSM前后臺交互的方法

    今天小編就為大家分享一篇layui框架與SSM前后臺交互的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09

最新評論