首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue xlsx读取excel文件

vue中如何使用xlsx读取excel文件实例代码

2023-12-12 15:57:59 作者：捂耳听枫

在Vue中使用xlsx库可以帮助我们读取和写入Excel文件,下面这篇文章主要给大家介绍了关于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>

总结

到此这篇关于vue中如何使用xlsx读取excel文件的文章就介绍到这了,更多相关vue xlsx读取excel文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！