vue中使用xlsx读取excel文件

下载安装插件

npm install xlsx
or
yarn add xlsx

在项目的node_modules文件夹和package.json文件中可以找到xlsx依赖

导入项目

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

获取文件对象

这里使用的h5原生文件上传项

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

其中multiple属性允许上传多个文件

在选择文件的过程中，触发事件的流程是下面这样的：

首先触发的是鼠标按下事件mousedown，然后就是焦点到了input上面，然后鼠标抬起事件mouseup，触发click事件，失去焦点onblur以后弹出文件选择框，选中文件以后触发焦点focus，最后触发change事件。

其中，可以发现fileList是一个类数组，由传入的file对象组成。每个file对象包含一下属性：

打印fileList信息

  let fileList = event.target.files;

属性	属性值	描述
lastModified	Number	表示最近一次的修改时间的时间戳
lastModeifiedDate	Object	表示最后一次修改时间的Date对象，可以在其中调用Date对象的有关方法。
name	文件上传时的文件名
size	文件的字节大小
type	String	文件的MIME类型
weblitRelativePath	当在input上添加webkitdirectory属性时，可选文件夹，此时weblitRelativePath表示文件夹中文件的相对路径。未加时为空

创建一个FileReader实例：

let reader = new FileReader();

FileReader提供了如下方法：

方法定义	方法定义
readAsArrayBuffer(file)	按字节读取文件内容，结果用ArrayBuffer对象表示
readAsBinaryString(file)	按字节读取文件内容，结果为文件的二进制串
readAsDataURL(file)	将文件读取为DataURL，因此可以读取图片。
readAsText(file, encoding)	将文件读取为文本，第二个参数是文本的编码方式，默认为utf-8
abort()	终止文件读取操作

FileReader提供了如下 事件:

事件	描述
onabort	当读取操作被终止时调用
onerror	当读取操作发生错误时调用
onload	当读取操作成功完成时调用
onloaded	当读取操作完成时调用，无论成功或失败
onloadstart	当读取操作开始时调用
onprogress	在读取数据过程中周期性调用

读取excel主要是通过以下语句实现：

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

返回的对象

FileReader方法对应的type取值如下：

base64	以base64方法读取
binary	BinatyString格式(byte n is data.charCodeAt (n))
string	UTF-8编码的字符串
buffer	nodejs Buffer
array	Uint8Array，8位无符号数组
file	文件的路径(仅nodejs下支持)

vue中的v-for()展示数据

演示

代码

<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>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>班级</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>学生信息</h2>
      <p>学号<input type="text" /></p>
      <p>姓名<input type="text" /></p>
      <p>年龄<input type="text" /></p>
      <p>班级<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;
      // 如果数据不为空
      if (fileList) {
        // 前言：FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。
        let reader = new FileReader();
        let file = fileList[0]; //拿到第一条数据
        reader.readAsBinaryString(file)// 将文件以二进制形式读入页面
        console.log(this);  //这里的this指向 vue中的data
        let _this = this //把data里的数据赋值给新的变量
        // wb:wordbook 工作表  
        reader.addEventListener("load", function (e) {
          console.log(this);  //FileReader实例对象
          var data = e.target.result; //读取成功后result中的数据
          var wb = XLSX.read(data, { type: 'binary' });  //以base64方法读取 结果

          let sheetName = wb.SheetNames[0] //是获取Sheets中第一个Sheet的名字
          let sheets = wb.Sheets[sheetName] //wb.Sheets[Sheet名]获取第一个Sheet的数据
          //将数据解析为json字符串
          let dataList2 = JSON.stringify(XLSX.utils.sheet_to_json(sheets))
          let dataList3 = (JSON.parse(dataList2)) //讲json转为 数组的格式 看格式所需
          _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>