- 在vue开发后台中,需求是前端上传csv文件,解析成对象数组,找到了插件
SheetJS js-xlsx
npm i xlsx -S
- 解析表格如下,是每天的需求量,库存等信息,表头要求是dd-MM-yyyy格式:
- 在使用插件读取文件之后:
readerData(rawFile) {
this.loading = true
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const workbook = XLSX.read(data, {
type: 'array',
cellDates: true
// raw: true
})
console.log('workbook===', workbook.Sheets)
const worksheet = workbook.Sheets[workbook.SheetNames[0]]
const header = this.getHeaderRow(worksheet)
const results = XLSX.utils.sheet_to_json(worksheet)
this.generateData({ header, results })
this.loading = false
resolve()
}
reader.readAsArrayBuffer(rawFile)
})
},
- 问题出现了,由于
cellDates: true
,表头的日期部分被识别成国际时间,如Sun Jan 03 2021 00:00:00 GMT+0800 (中国标准时间)
,这样就无法跟字符串类型的日期27.02.2021
一起格式化,在百度谷歌找了很久,最终在github的issues中找到方法,把raw设为true:
const workbook = XLSX.read(data, {
type: 'array',
raw: true
})
- 最终效果对比:
- 解析后:{
day: “2021-02-01”
demandQty: “5075”
itemNo: “2600135”
}
成功,希望对碰到同样问题的朋友有点帮助