安装XLSX
在项目中安装XLSX:
npm install xlsx --save
解析数据
通过el-upload上传excel表格文件,代码如下:
<el-upload action=""
:before-remove="beforeRemove"
multiple :show-file-list="false"
style="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>
在项目中引入xlsx:
import XLSX from 'xlsx'
获取上传表格文件的数据函数:
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)
}
表格数据如下:
解析得到的表格JSON数据结构如下:
下载模板
给按钮注册点击事件:
<el-button size="mini" @click="load">下载模板excel</el-button>
响应函数代码如下(如果表格名存在中文,需要先对文件路径进行处理,处理方法encodeURI):
load () {
console.log(encodeURI('/static/test.xlsx'))
// window.location = '/static/test.xlsx'
location.href = '/static/test.xlsx'
}
完整项目代码:
<template>
<div style="position:relative;">
<el-upload action=""
:before-remove="beforeRemove"
multiple :show-file-list="false"
style="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>
<el-button size="mini" @click="load">下载模板excel</el-button>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
methods: {
beforeRemove (file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`)
},
handleExceed (files, fileList) {
this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`)
},
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)
},
load () {
console.log(encodeURI('/static/test.xlsx'))
// window.location = '/static/test.xlsx'
location.href = '/static/test.xlsx'
}
}
}
</script>