效果图
implUserExcel(file) {
const that = this
this.loadingExcel = true
const isXls = file.type === 'xls/xlsx'
const isLt2M = file.size / 1024 / 1024
if (file.name.indexOf('xls') === -1) {
this.loading = false
this.$refs.upload.clearFiles()
this.$message.error('导入文件格式只能是 xls/xlsx 格式的Excel文件!')
return
} else {
if (isLt2M > 1) {
this.loadingExcel = false
this.$refs.upload.clearFiles()
this.$message.error('导入文件大小不能超过 1MB!')
return
} else {
const loading = this.$loading({
lock: true,//同v-loading的修饰符
text: '解析文件中',//加载文案
backgroundColor: 'rgba(55,55,55,0.4)',//背景色
spinner: 'el-icon-loading',//加载图标
target: document.querySelector(".el-dialog__body")//loading需要覆盖的DOM节点,默认为body
})
this.fileData = file
this.excelDataArr = []
// 拿到所导入文件的名字
const fileName = file.raw
// 定义reader,存放文件读取方法
const reader = new FileReader()
//定时器解析文件防止加载动画不生效
setTimeout(()=>{
// 启动函数
reader.readAsBinaryString(fileName)
reader.onloadstart = (e)=>{
this.upload.isUploading = true
}
// onload在文件被读取时自动触发
reader.onload = function(e) {
loading.close()
// console.log('dkdk',e.target.result)
const uploadData = []
// workbook存放excel的所有基本信息
const workbook = XLSX.read(e.target.result, { type: 'binary' })
// console.log('dkkd',XLSX)
// var sheets = workbook.Sheets;
// uploadData = that.transformSheets(sheets);
// Here is your object获取空单元格
var XL_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], { defval: null })
// console.log('ksksk', XL_row_object.length)
if (XL_row_object.length > 0) {
// console.log('dkkd',XL_row_object)
that.excelDataArr = XL_row_object
that.handleExcelData(XL_row_object.slice(0,1000))
that.excelCurrent = 1
that.excelTotol = XL_row_object.length
}
}
},10)
}
this.loadingExcel = false
}
this.loadingExcel = false
},
// 遍历回显上传表格
handleExcelData(XL_row_object){
// console.log('ccc',num,circleNum,timer)
this.excelData = []
for (var i = 0; i < XL_row_object.length; i++) {
var obj = {
materielCode: '',
materielName: '',
model: '',
materielTypeName: '',
warehouseName: '',
warehouseCode: '',
storageName: '',
stationCode: '',
remark: '',
unit: ''
}
obj.materielCode = Object.values(XL_row_object[i])[0]
obj.materielName = Object.values(XL_row_object[i])[1]
obj.materielTypeName = Object.values(XL_row_object[i])[2]
obj.model = Object.values(XL_row_object[i])[3]
obj.warehouseName = Object.values(XL_row_object[i])[4]
obj.warehouseCode = Object.values(XL_row_object[i])[5]
obj.stationCode = Object.values(XL_row_object[i])[6]
obj.storageName = Object.values(XL_row_object[i])[7]
obj.remark = Object.values(XL_row_object[i])[8]
obj.unit = Object.values(XL_row_object[i])[9]
this.excelData.push(obj)
// console.log('ooo',i==XL_row_object.length-1)
}
// },5000)
},
数据量较大时可做分页展示