1.npm install xlsx --save
2.通过el-upload上传excel表格文件,代码:
<el-upload
action=""
:before-remove="beforeRemove"
multiple :show-file-list="false"
tyle="display: contents" accept=".xls,.XLS,.xlsx,.XLSX"
:limit="3"
:on-exceed="handleExceed"
:http-request="httpRequest">
<el-button size="mini" style="margin-left: 10px">excel导入</el-button>
</el-upload>
3.引入xlsx:
import XLSX from 'xlsx'
4.获取上传表格文件的数据函数:
//http-request:覆盖默认的上传行为,可以自定义上传的实现->function类型
httpRequest (e) {
let file = e.file // 拿到文件信息
if (!file) {
return false
} else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
// 这里格式根据自己需求定义
this.$message.error('格式错误,请上传xls或者xlsx格式')
return false
}
const fileReader = new FileReader()
fileReader.onload = (ev) => {
try {
const data = ev.target.result
const workbook = XLSX.read(data, {
// 以字符编码方式解析
type: 'binary'
})
// 获取第一张表
console.log(workbook)
const exlname = workbook.SheetNames[0]
const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
console.log(exl)
// 将 JSON 数据挂到 data 里
let arr = []
exl.forEach(item => {
arr.push(item.name)
})
console.log(arr)
} catch (e) {
console.log('error')
return false
}
}
fileReader.readAsBinaryString(file)
}