js如何讀取excel文件,繪製echarts圖形。

一、場景描述

  • 一般來講,前端要拿到excel數據,都是先上傳存儲數據庫,而後再請求後端接口,獲取數據。
  • 但有100個產品經理,就會有101個不一樣的需求。
  • 本文以本身的vue項目爲例。

二、需求描述

  • 現有一張excel財務報表,須要根據這張excel表繪製成各類echarts圖形,用於年度彙報。
  • 不通過後端,前端獨立完成。

三、功能實現

  • 首先,爲了將excel數據繪製成echarts圖表,前端得拿到excel數據。
  1. 這裏咱們藉助js-xlsx.js庫,安裝xlsx:
cnpm i -S xlsx

你也能夠cdn的方式直接引用:
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script>
複製代碼
  1. 首先你須要讀取excel文件:
<input type="file" id="excel-file">
複製代碼
  1. 添加響應事件change獲取excel數據:
<input type="file" id="excel-file" @change="updateFile">

經過updateFile接受數據
updateFile(e) {
  let files = e.target.files;
  console.log(files)
}
複製代碼
  1. 獲得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]); // 將文件讀取爲二進制字符串展現在頁面
}
複製代碼
  1. 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: ' '
        })
    }
}
複製代碼
  1. 將獲得的數據渲染在echarts中,效果以下:

四、尾言

  • 本文中主要講解excel數據獲取部分。
  • 對於將獲取的數組數據如何處理將會在後面的文章中詳細講解。
  • echarts圖標在此不作詳細講解,後面將會專門寫一篇echarts圖標的經常使用配置。如效果圖中提示部分的換行以及多顏色樣式配置等。
相關文章
相關標籤/搜索