如何利用JavaScript讀取excel檔案並繪製echarts圖形

2022-05-24 22:01:42

1、場景描述

通常來說，前端要拿到excel資料，都是先上傳儲存資料庫，然後再請求後端介面，獲取資料。
但有100個產品經理，就會有101個不同的需求。
本文以自己的vue專案為例。

2、需求描述

現有一張excel財務報表，需要根據這張excel表繪製成各種echarts圖形，用於年度彙報。
不經過後端，前端獨立完成。

3、功能實現

首先，為了將excel資料繪製成echarts圖表，前端得拿到excel資料。

這裡我們藉助js-xlsx.js庫，安裝xlsx:

cnpm i -S xlsx

你也可以cdn的方式直接參照：

<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>

首先你需要讀取excel檔案：

<input type="file" id="excel-file">

新增響應事件change獲取excel資料：

<input type="file" id="excel-file" @change="updateFile">

通過updateFile接受資料

updateFile(e) {
  let files = e.target.files;
  console.log(files)
}

得到files，說明我們已經獲取到上傳的excel檔案。現在我們需要將files轉化成我們熟悉的陣列型別。我們使用fileReader方法。

FileReader共有4種讀取方法：

1.readAsArrayBuffer(file)：將檔案讀取為ArrayBuffer。
2.readAsBinaryString(file)：將檔案讀取為二進位制字串
3.readAsDataURL(file)：將檔案讀取為Data URL
4.readAsText(file, [encoding])：將檔案讀取為文字，encoding預設值為'UTF-8'

 updateFile(e) {
  let _this = this;
  let files = e.target.files;
  let fileReader = new FileReader();
  fileReader.onload = function(ev) {
    try {
      let data = ev.target.result;
      let workbook = XLSX.read(data, { type: "binary" }); // 以二進位制流方式讀取得到整份excel表格物件
      let sheetName = workbook.Sheets[workbook.SheetNames[0]]; // 這裡我們唯讀取第一張表，獲取表名（如Sheet1）
      _this.excelData = XLSX.utils.sheet_to_json(sheetName, {
        header: "A",
        raw: true,
        defval: " " // 意思是從頭開始匹配，如遇到空格，將跳過執行，並替換為" "字串。
      });
      console.log(_this.excelData) // excelData在data()中宣告的變數, _this.excelData就是我們熟悉的陣列資料了。
    } catch (e) {
      return _this.$message.error("檔案型別不正確！");
    }
  };
  // fileReader.readAsBinaryString(files[0]); // 將檔案讀取為二進位制字串展示在頁面
}

excel多張表格的處理：

var fromTo = '' // 表格範圍，可用於判斷表頭數量是否正確
// 遍歷每張表讀取
for (var sheet in workbook.Sheets) {
    if (workbook.Sheets.hasOwnProperty(sheet)) {
        fromTo = workbook.Sheets[sheet]['!ref'] // 表頭數量
        _this.excelData = _this.excelData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]), {
            header: 'A', 
            raw: true, 
            defval: ' '
        })
    }
}

將得到的資料渲染在echarts中，效果如下：

4、尾言

本文中主要講解excel資料獲取部分。
對於將獲取的陣列資料如何處理將會在後面的文章中詳細講解。

到此這篇關於如何利用JavaScript讀取excel檔案並繪製echarts圖形的文章就介紹到這了,更多相關js讀取excel檔案內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

如何利用JavaScript讀取excel檔案並繪製echarts圖形

目錄

1、場景描述

2、需求描述

3、功能實現

4、尾言

熱門文章