首先，我的开发环境是：vue3+vue-cli+element
安装dependencies运行依赖项 xlsx
npm install xlsx --save
使用xlsx读取excel文件内容
组件代码
<template>
<el-upload class="upload-demo" action='' drag :auto-upload="false" :on-change="uploadChange" :limit="1">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</template>
<script>
import xlsx from 'xlsx';
import {readFile} from '../plugins/readFile.js'; //下文有该文件代码
export default {
name: 'upload',
methods:{
async uploadChange(file){
let dataBinary = await readFile(file.raw)
let workBook = xlsx.read(dataBinary, {type: 'binary', cellDates: true})
let workSheet = workBook.Sheets[workBook.SheetNames[0]]
const data = xlsx.utils.sheet_to_json(workSheet)
console.log(data)
}
}
}
</script>
readFIle.js
export const readFile = (file) => {
return new Promise(resolve => {
let reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = ev => {
resolve(ev.target.result)
}
})
}
输出结果
image.png
小伙伴们可以亲手试一试。
