vue读取excel表格数据_vue excel文件的导入读取和下载
导读：后台管理平台经常要上传文件读取文件的内容和导出数据表，因此需要依赖第三方插件xlsx
1、安装依赖
npm install xlsx -S
2、在目标组件vue中引入
import XLSX form 'xlsx
3、简单的创建并导出数据表
data() {
return {
xlxsData: [ // 源数据
{
'type': '颜色',
'ID': '34234',
'name': 'Light Pink'
}
]
}
},
methods: {
downExcle() {
const outputXlsxFile = (data, header, xlsxName) => {
const ws = XLSX.utils.json_to_sheet(data, header)
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, xlsxName)
XLSX.writeFile(wb, xlsxName + '.xlsx')
};
// 理想数据模型
//let data = [
// {
// "类型": "颜色",
// "id": "34234",
// "名称": "Light Pink"
// }
//];
// 实际数据模型 this.xlxsData
// 映射表头mapList
const mapList= {
"type": "类型",
"id": "ID",
"name": "名称"
}
let header = {
header: Object.values(mapList) // 获取中文表头
}
// 调用filterJson函数进行JSON转化
outputXlsxFile(this.filterJson(mapList), header, '标签批量模版')
},
// 将中文映射成英文键
filterJson(mapList) {let res = [];
this.xlxsData.map(item => { // 对源数据处理，将英文键转化成中文
let obj = {}
for (let key in mapList)
obj[mapList[key]] = item[key] // 保持xlxsMap的键和源数据一致，否则会有数据会缺少
}
res.push(obj)
})
return res
}
}
注： 一般data的格式不会是中文键名，因此需要过滤函数，进行转化
4、导入并读取excel文件
action="/"
:on-change="uploadChange"
:show-file-list="false"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
:auto-upload="false">
导入数据
data() {
return {
xlscList: [],
xlscTitle: {
"类型": "type"
"ID": "id",
"名称": "name"
},
}
},
methods:{
uploadChange(file) {
let self = this;
const types = file.name.split('.')[1];
const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => {
return item === types
});
if (!fileType) {
this.$message.error('文件格式错误，请重新选择文件！')
}
this.file2Xce(file).then(tab => {
// console.log(tab)
// 过滤，转化正确的JSON对象格式
if (tab && tab.length > 0) {
tab[0].sheet.forEach(item => {
let obj = {};
for (let key in item) {
obj[self.xlscTitle[key]] = item[key];
}
self.xlscList.push(obj);
});
// console.log(self.xlscList)
if (self.xlscList.length) {
this.$message.success('上传成功')
// 获取数据后，下一步操作
} else {
this.$message.error('空文件或数据缺失，请重新选择文件！')
}
}
})
},
// 读取文件
file2Xce(file) {
return new Promise(function(resolve, reject) {
const reader = new FileReader();
reader.onload = function(e) {
const data = e.target.result;
this.wb = Xlsx.read(data, {
type: "binary"
});
const result = [];
this.wb.SheetNames.forEach(sheetName => {
result.push({
sheetName: sheetName,
sheet: Xlsx.utils.sheet_to_json(this.wb.Sheets[sheetName])
})
})
resolve(result);
}
reader.readAsBinaryString(file.raw);
})
}
注： 以上的导出的excel不能自定义样式，需要一样插件xlsx-style, 喜欢的同学可以自行研究