下载安装插件
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()展示数据
演示
文章来源：https://www.toymoban.com/news/detail-783905.html
文章来源地址https://www.toymoban.com/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>学号</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文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
