vue+Element+xlsx 导入并预览
下载插件 cnpm install xlsx --save引入import XLSX from ‘xlsx’element中prop可以为汉字这样就简单多了,省去解析的数据再去遍历修改成英文注意prop中使用的是汉字<el-table :data="tableData" style="width: 100%"><el-table-column v-for=...
·
- 下载插件 cnpm install xlsx --save
- 引入import XLSX from ‘xlsx’
- element中prop可以为汉字这样就简单多了,省去解析的数据再去遍历修改成英文 注意prop中使用的是汉字
<el-table :data="tableData" style="width: 100%">
<el-table-column v-for="item in cols" :prop="item.label" :label="item.label" width="180">
</el-table-column>
</el-table>
表格表头数据,(这种是固定的几种表头)
cols: [{
prop:"time",
label:"创建时间"
},{
prop:"name",
label:"姓名"
},{
prop:"phone",
label:"手机"
},{
prop:"status",
label:"状态"
},{
prop:"user",
label:"用户名"
},{
prop:"role",
label:"角色"
},{
prop:"mail",
label:"邮箱"
},{
prop:"depart",
label:"部门"
}]
<!--script中代码-->
通过watch监听,调用解析方法
watch: {
'$store.state.dataFile': function() {
console.log(this.$store.state.dataFile)
this.importExcel(this.$store.state.dataFile.files[0])
}
},
解析方法
importExcel(file) {
// let file = file.files[0] // 使用传统的input方法需要加上这一步
const types = file.name.split('.')[1]
const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
if (!fileType) {
this.$message('格式错误!请重新选择')
return
}
this.file2Xce(file).then(tabJson => {
if (tabJson && tabJson.length > 0) {
// this.tableData = [{
// "创建时间":"2019-01-03",
// "姓名":"123",
// "手机":"13898786858",
// "状态":"未",
// "用户名":"管理",
// "角色":"组长",
// "邮箱":"123"
// }]
this.tableData = tabJson[0].sheet
//console.log('数据', this.tableData)
}
})
},
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)
// reader.readAsBinaryString(file) // 传统input方法
})
}
更多推荐
已为社区贡献4条内容
所有评论(0)