亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何利用JavaScript讀取excel文件并繪制echarts圖形

 更新時(shí)間:2022年05月24日 17:06:37   作者:??SilentLove????  
這篇文章主要介紹了如何利用JavaScript讀取excel文件并繪制echarts圖形,文章通過(guò)excel財(cái)務(wù)報(bào)表,并且需要根據(jù)這張excel表繪制成各種echarts圖形,需要了解更多詳情的小伙伴可以參考一下文章內(nèi)內(nèi)容

1、場(chǎng)景描述

  • 通常來(lái)說(shuō),前端要拿到excel數(shù)據(jù),都是先上傳存儲(chǔ)數(shù)據(jù)庫(kù),然后再請(qǐng)求后端接口,獲取數(shù)據(jù)。
  • 但有100個(gè)產(chǎn)品經(jīng)理,就會(huì)有101個(gè)不同的需求。
  • 本文以自己的vue項(xiàng)目為例。

2、需求描述

  • 現(xiàn)有一張excel財(cái)務(wù)報(bào)表,需要根據(jù)這張excel表繪制成各種echarts圖形,用于年度匯報(bào)。
  • 不經(jīng)過(guò)后端,前端獨(dú)立完成。

3、功能實(shí)現(xiàn)

首先,為了將excel數(shù)據(jù)繪制成echarts圖表,前端得拿到excel數(shù)據(jù)。

這里我們借助js-xlsx.js庫(kù),安裝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">

添加響應(yīng)事件change獲取excel數(shù)據(jù):

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

通過(guò)updateFile接受數(shù)據(jù)

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

得到files,說(shuō)明我們已經(jīng)獲取到上傳的excel文件。現(xiàn)在我們需要將files轉(zhuǎn)化成我們熟悉的數(shù)組類型。 我們使用fileReader方法。

FileReader共有4種讀取方法:

  • 1.readAsArrayBuffer(file):將文件讀取為ArrayBuffer。
  • 2.readAsBinaryString(file):將文件讀取為二進(jìn)制字符串
  • 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" }); // 以二進(jìn)制流方式讀取得到整份excel表格對(duì)象
      let sheetName = workbook.Sheets[workbook.SheetNames[0]]; // 這里我們只讀取第一張表,獲取表名(如Sheet1)
      _this.excelData = XLSX.utils.sheet_to_json(sheetName, {
        header: "A",
        raw: true,
        defval: " " // 意思是從頭開(kāi)始匹配,如遇到空格,將跳過(guò)執(zhí)行,并替換為" "字符串。
      });
      console.log(_this.excelData) // excelData在data()中聲明的變量, _this.excelData就是我們熟悉的數(shù)組數(shù)據(jù)了。
    } catch (e) {
      return _this.$message.error("文件類型不正確!");
    }
  };
  // fileReader.readAsBinaryString(files[0]); // 將文件讀取為二進(jìn)制字符串展示在頁(yè)面
}

excel多張表格的處理:

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

將得到的數(shù)據(jù)渲染在echarts中,效果如下:

4、尾言

  • 本文中主要講解excel數(shù)據(jù)獲取部分。
  • 對(duì)于將獲取的數(shù)組數(shù)據(jù)如何處理將會(huì)在后面的文章中詳細(xì)講解。

到此這篇關(guān)于如何利用JavaScript讀取excel文件并繪制echarts圖形的文章就介紹到這了,更多相關(guān)js讀取excel文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論