快捷導(dǎo)航

在Vue中導(dǎo)入并讀取Excel數(shù)據(jù)的操作步驟

更新時(shí)間：2023年08月01日 09:34:45 作者：瓜皮倫

在工作中遇到需要前端上傳excel文件獲取到相應(yīng)數(shù)據(jù)處理之后傳給后端并且展示上傳文件的數(shù)據(jù),所以本文就來(lái)給大家介紹一下Vue中導(dǎo)入并讀取Excel數(shù)據(jù)的操作步驟,需要的朋友可以參考下

一、引入依賴(lài)

 npm install -S file-saver xlsx
 npm install -D script-loader
 npm install xlsx

二、在main.js中引入

import XLSX from 'xlsx'

三、創(chuàng)建vue文件

<div>
      <el-upload
          class="upload-demo"
          action=""
          :on-change="handleChange"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          :limit="limitUpload"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
          :auto-upload="false">
        <!-- 只 能 上 傳 xlsx / xls 文 件 -->
      <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
      </el-upload>
      <!-- 數(shù)據(jù)展示 -->
        <el-main>
            <el-table :data="da">
              <el-table-column prop="code" label="編號(hào)">
              </el-table-column>
              <el-table-column prop="name" label="姓名">
              </el-table-column>
              <el-table-column prop="pro" label="省份">
              </el-table-column>
              <el-table-column prop="cit" label="城市">
              </el-table-column>
              <el-table-column prop="dis" label="區(qū)縣">
              </el-table-column>
            </el-table>
          </el-main>
    </div>

四、核心方法

handleChange(file, fileList){
              this.fileTemp = file.raw;
              if(this.fileTemp){
                  if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') 
                      || (this.fileTemp.type == 'application/vnd.ms-excel')){
                      this.handleExcel(this.fileTemp);
                  } else {
                      this.$message({
                          type:'warning',
                          message:'文件格式錯(cuò)誤，請(qǐng)刪除后重新上傳！'
                      })
                  }
              } else {
                  this.$message({
                      type:'warning',
                      message:'請(qǐng)上文件！'
                  })
              }
          },
          handleExcel(fileTemp) {
              let _this = this;
              this.file = fileTemp;
              var rABS = false; //是否將文件讀取為二進(jìn)制字符串
              var f = this.file;
              var reader = new FileReader();
              FileReader.prototype.readAsBinaryString = function(f) {
                  var binary = "";
                  var rABS = false; //是否將文件讀取為二進(jìn)制字符串
                  var wb; //讀取完成的數(shù)據(jù)
                  var outdata;
                  var reader = new FileReader();
                  reader.onload = function(e) {
                      var bytes = new Uint8Array(reader.result);
                      var length = bytes.byteLength;
                      for (var i = 0; i < length; i++) {
                          binary += String.fromCharCode(bytes[i]);
                      }
                      var XLSX = require("xlsx");
                      if (rABS) {
                          wb = XLSX.read(btoa(fixdata(binary)), {
                          //手動(dòng)轉(zhuǎn)化
                          type: "base64"
                          });
                      } else {
                          wb = XLSX.read(binary, {
                          type: "binary"
                          });
                      }
                      outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的東西
                      console.log('未處理的原始數(shù)據(jù)如下：');
                      console.log(outdata);
                      //此處可對(duì)數(shù)據(jù)進(jìn)行處理
                      let arr = [];
                      outdata.map(v => {
                          let obj = {}
                          obj.code = v['code']
                          obj.name = v['name']
                          obj.pro = v['province']
                          obj.cit = v['city']
                          obj.dis = v['district']
                          arr.push(obj)
                      });
                      _this.da=arr;
                      _this.dalen=arr.length;
                      return arr;
                  };
                  reader.readAsArrayBuffer(f);
              };
              if (rABS) {
                  reader.readAsArrayBuffer(f);
              } else {
                  reader.readAsBinaryString(f);
              }
          }

結(jié)果展示

到此這篇關(guān)于在Vue中導(dǎo)入并讀取Excel數(shù)據(jù)的流程步驟的文章就介紹到這了,更多相關(guān)Vue導(dǎo)入并讀取Excel數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: