今天我们来详细讲解怎样使用xlsx实现前端上传excel表格并读取表格数据。
首先,我们安装xlsx:npm install xlsx --save
然后,我们再使用xlsx,封装一个读取excel表格数据的组件:
<template>
<span style="margin-right:10px">
<input class="input-file" type="file" @change="exportData"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<el-button type="primary" size="mini" icon="el-icon-upload" @click="btnClick">上传Excel表格数据</el-button>
</span>
</template>
<script>
import XLSX from 'xlsx'
export default {
data() {
return {}
},
methods: {
btnClick() {
document.querySelector('.input-file').click()
},
exportData(event) {
if (!event.currentTarget.files.length) {
return
}
const that = this
// 拿取文件对象
var f = event.currentTarget.files[0]
// 用FileReader来读取
var reader = new FileReader()
// 重写FileReader上的readAsBinaryString方法
FileReader.prototype.readAsBinaryString = function(f) {
var binary = ''
var wb // 读取完成的数据
var outdata // 你需要的数据
var reader = new FileReader()
reader.onload = function(e) {
// 读取成Uint8Array,再转换为Unicode编码(Unicode占两个字节)
var bytes = new Uint8Array(reader.result)
var length = bytes.byteLength
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i])
}
// 接下来就是xlsx了,具体可看api
wb = XLSX.read(binary, {
type: 'binary'
})
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
// 自定义方法向父组件传递数据
that.$emit('getResult', outdata)
}
reader.readAsArrayBuffer(f)
}
reader.readAsBinaryString(f)
}
}
}
</script>
<style>
.input-file {
display: none;
}
</style>
然后我们调用该组件:
<template>
<input-excel @getResult="getMyExcelData"></input-excel>
</template>
<script>
import inputExcel from '@/components/uploadExcel/uploadExcel'
export default{
data(){
return{}
},
components:{
inputExcel
},
methods:{
getMyExcelData(data) {
// data 为读取的excel数据,在这里进行处理该数据
}
}
}
</script>