// 第一步 安装 xlsx
npm i xlsx
// 第二步 页面引入
import xlsx from 'xlsx'
// 第三步 绘制页面
<div>
<el-upload
action
accept='.xlsx'
:auto-upload='false'
:on-change='inputFile'
:show-file-list='false'
>
<el-button
type="primary"
size="small"
>导入Excel</el-button>
</el-upload>
</div>
// 第四步 定义模板
data(){
return {
changeCnToEn: {
'姓名': 'name',
'年龄': 'age',
},
tableLIst :[]
}
}
// 第五步 处理表格数据 发起请求 写在method中
// 把文件按照二进制方式读取
readFile(file) {
return new Promise(resolve => {
let reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = ev => {
resolve(ev.target.result)
}
})
},
// 导入文件
async inputFile(e) {
// console.log(e)
this.inputFileName = e.name
let file = e.raw
if (!file) return
// console.log(file)
// 读取file文件的内容(转换为json格式)
let data = await this.readFile(file)
console.log(data) //解析出的二进制文件
// type :'binary' 类型为二进制
let eleData = xlsx.read(data, { type: "binary" })
// console.log(eleData)
let eleDataSheet = eleData.Sheets[eleData.SheetNames[0]]
eleData = xlsx.utils.sheet_to_json(eleDataSheet) // 将解析出的数据转换为json格式(xlsx自带的方法)
// eleData = eleData.length >1? eleData[1] : eleData[0]
// console.log(eleData)
const arr = []
console.log(Object.keys(this.changeCnToEn))
eleData.forEach(item => {
const userInfo = {}
// console.log(Object.keys(item))
Object.keys(item).forEach(key => {
userInfo[this.changeCnToEn[key]] = item[key]
})
// console.log(userInfo)
arr.push(userInfo)
})
this.tableLIst = arr
console.log(arr) // 数组对象 就是Excel里的数据
setTimeout(() => {
this.lead()
}, 500)
},
// 请求后端接口
lead() {
const leadData = {
xxx: xxxx, // this.tableLIst 表格数据
}
request({
url: '',
method: 'get',
params: leadData
}).then(res => {
console.log(res, 'res');
})
},
// 注意: 如果报错 TypeError: Cannot read properties of undefined (reading 'read')
// 先卸载 xlsx npm uninstall xlsx
// 在安装适合版本 npm install xlsx@0.16.0
// 重启项目
vue 导入Excel 传给后端
最新推荐文章于 2024-05-16 03:06:20 发布