下載安裝插件

npm install xlsx
or
yarn add xlsx

在項(xiàng)目的node_modules文件夾和package.json文件中可以找到xlsx依賴(lài)

導(dǎo)入項(xiàng)目

import * as XLSX from "../../node_modules/xlsx"

獲取文件對(duì)象

這里使用的h5原生文件上傳項(xiàng)

        <input type="file" id="uploadExcel" multiple @change="Change" />

其中multiple屬性允許上傳多個(gè)文件

在選擇文件的過(guò)程中，觸發(fā)事件的流程是下面這樣的：

首先觸發(fā)的是鼠標(biāo)按下事件mousedown，然后就是焦點(diǎn)到了input上面，然后鼠標(biāo)抬起事件mouseup，觸發(fā)click事件，失去焦點(diǎn)onblur以后彈出文件選擇框，選中文件以后觸發(fā)焦點(diǎn)focus，最后觸發(fā)change事件。

其中，可以發(fā)現(xiàn)fileList是一個(gè)類(lèi)數(shù)組，由傳入的file對(duì)象組成。每個(gè)file對(duì)象包含一下屬性：

打印fileList信息

  let fileList = event.target.files;

創(chuàng)建一個(gè)FileReader實(shí)例：

let reader = new FileReader();

FileReader提供了如下方法：

FileReader提供了如下 事件:

讀取excel主要是通過(guò)以下語(yǔ)句實(shí)現(xiàn)：

XLSX.read(data, { type: type });

返回的對(duì)象

FileReader方法對(duì)應(yīng)的type取值如下：

vue中的v-for()展示數(shù)據(jù)

演示

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-783905.html

代碼

<template>
  <div class="container">
    <div class="header">
      <div class="btn">
        <button @click="Add">添加</button>
        <button>保存</button>
        <button @click="AllAdd">全部刪除</button>
      </div>
      <div class="inp">
        <input type="file" id="uploadExcel" multiple @change="Change" />

      </div>
    </div>

    <table id="table">
      <thead>
        <tr>
          <th>學(xué)號(hào)</th>
          <th>姓名</th>
          <th>年齡</th>
          <th>班級(jí)</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody style="text-align: center">
        <tr v-for="item in dataList" :key="item.id">
          <td>{{ item.__EMPTY }}</td>
          <td>{{ item.__EMPTY_1 }}</td>
          <td>{{ item.__EMPTY_2 }}</td>
          <td>{{ item.__EMPTY_3 }}</td>
          <td>
            <button @click="del(item.__EMPTY)">刪除</button>
            <button @click="Add()">修改</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div id="shade" class="c1 hide"></div>
    <div id="modal" class="c2 hide">
      <h2>學(xué)生信息</h2>
      <p>學(xué)號(hào)<input type="text" /></p>
      <p>姓名<input type="text" /></p>
      <p>年齡<input type="text" /></p>
      <p>班級(jí)<input type="text" /></p>
      <p>

        <button type="button">添加</button>
        <button type="button" @click="Hide();">取消</button>
      </p>
    </div>


  </div>
</template>
<script>
import * as XLSX from "../../node_modules/xlsx"
export default {
  data() {
    return {
      dataList: []
    };
  },

  methods: {
    Change(event) {
      // 獲取到文件夾
      let fileList = event.target.files;
      // 如果數(shù)據(jù)不為空
      if (fileList) {
        // 前言：FileReader是一種異步文件讀取機(jī)制，結(jié)合input:file可以很方便的讀取本地文件。
        let reader = new FileReader();
        let file = fileList[0]; //拿到第一條數(shù)據(jù)
        reader.readAsBinaryString(file)// 將文件以二進(jìn)制形式讀入頁(yè)面
        console.log(this);  //這里的this指向 vue中的data
        let _this = this //把data里的數(shù)據(jù)賦值給新的變量
        // wb:wordbook 工作表  
        reader.addEventListener("load", function (e) {
          console.log(this);  //FileReader實(shí)例對(duì)象
          var data = e.target.result; //讀取成功后result中的數(shù)據(jù)
          var wb = XLSX.read(data, { type: 'binary' });  //以base64方法讀取 結(jié)果

          let sheetName = wb.SheetNames[0] //是獲取Sheets中第一個(gè)Sheet的名字
          let sheets = wb.Sheets[sheetName] //wb.Sheets[Sheet名]獲取第一個(gè)Sheet的數(shù)據(jù)
          //將數(shù)據(jù)解析為json字符串
          let dataList2 = JSON.stringify(XLSX.utils.sheet_to_json(sheets))
          let dataList3 = (JSON.parse(dataList2)) //講json轉(zhuǎn)為 數(shù)組的格式 看格式所需
          _this.dataList = dataList3//賦值
     
        })
      }
    },
    Add() {
      document.getElementById('shade').classList.remove('hide');
      document.getElementById('modal').classList.remove('hide');
    },
    Hide() {
      document.getElementById('shade').classList.add('hide');
      document.getElementById('modal').classList.add('hide');
    },
    AllAdd() {

    },
    del(id) {
      console.log(id);
      let index = null
      index = this.dataList.findIndex(item => {
        if (item.id === id) return true
      })
      this.dataList.splice(index, 1)
    },

  },
};
</script>

<style scoped>
.container {
  width: 800px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid;
}

tr,
th,
td {
  border: 1px solid #000;
  padding: 5px;
}

button {
  border: none;
  padding: 5px;
  background-color: #00a297;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
}

tr:nth-child(2n) {
  background-color: #dcdcdc;
}

.hide {
  display: none;
}

.c1 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 2;
}

.c2 {
  background-color: white;
  position: fixed;
  width: 400px;
  height: 300px;
  top: 50%;
  left: 50%;
  z-index: 3;
  margin-top: -150px;
  margin-left: -200px;
}
</style>

到了這里，關(guān)于vue中使用xlsx讀取excel文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！