安装xlsx插件
npm install xlsx
导入xlsx
import XLSX from 'xlsx'
前端UI如下：
<bk-upload
:tip="'只允许上传JPG、PNG、JPEG的文件'"
:with-credentials="true"
:accept="'.xlsx, .xls'"
@custom-request="getExcel"
:multiple="false">
</bk-upload>
点击上传：
getExcel (file) {
console.log(file)
const types =file.fileObj.name.split(".")[1]
const fileType = ["xlsx","xls"].some(
item => item === types
)
if(!fileType){
return false
}
this.analysis(file).then(tableJson =>{
if (tableJson && tableJson.length > ){
this.formData.storages =[]
const dataExcel=tableJson[0]
const data=JSON.parse(JSON.stringify(dataExcel.sheet))
const items = data.map(ite => {
return {
'dish_num':ite['盘号'],
'store_name':ite['数据存储名'],
'key': ite['盘号'] +'_'+ ite['数据存储名']
}
})
this.formData.storages = items
}
})
}
得到的文件信息如下，在这里只需要关注fileList中的origin内容
对得到的文件信息进行处理，使用FileReader
主要分为三步:
1、构建FileReader对象
2、使用reader.readAsBinaryString()指定需要读取的内容，一旦完成，result属性中将包含所读取文件的原始二进制数据
3、在reader.onload中触发读取完成之后的操作
analysis (file){
return new Promise(function (resolve) {
# 1、构建FileReader对象
const reader =new FileReader()
# 3、读取完成时的操作
reader.onload = function (e){
# 使用XLSX解析读取到的数据
const data = e.target.result
const datajson = XLSX.read(data, {type: "binary"})
const result = []
datajson.SheetNames.forEach(sheetName => {
result.push({
sheetName: sheetName,
sheet: xLsx.utils.sheet_to_json(datajson.Sheets[sheetName])
})
})
resolve(result)
}
# 2、传入需要读取的内容
reader.readAsBinaryString(file.fileList[0].origin)
})
}
XSLX解析二进制数据，使用XLSX.read(data, {type: type})来完成
type的类型如下
base64: 以base64方式读取
binary: BinaryString格式(byte n is data.charCodeAt(n))
string: UTF8编码的字符串
buffer: nodejs Buffer
array: Uint8Array，8位无符号数组
file: 文件的路径（仅nodejs下支持）
我们这里使用的是binary，读取到的数据如下：
解析sheet的方法如下：
XLSX.utils.sheet_to_csv：生成CSV格式
XLSX.utils.sheet_to_txt：生成纯文本格式
XLSX.utils.sheet_to_html：生成HTML格式
XLSX.utils.sheet_to_json：输出JSON格式
我们在这里使用XLSX.utils.sheet_to_json，XLSX.utils.sheet_to_json(data, type)有两个参数，第一个是我们wordBook对象里面Sheets对象对应的数据，第二个参数配置如下：
raw: 使用原始值 (true) 或格式化字符串 (false) （默认值：true）
dateNF: 在字符串输出中使用指定的日期格式（默认值：FMT 14）
defval: 使用指定值代替 null 或 undefined （）
blankrows: 在输出中包含空行**（默认值：** ）
range:
(number)使用工作表范围，但将起始行设置为值
(String)使用指定范围（A1 样式的有界范围字符串
(default)使用工作表范围 ( worksheet[‘!ref’])
header:
1: 生成数组数组（“二维数组”）
"A".行对象键是文字列标签
array of strings: 使用指定的字符串作为行对象中的键
(default): 将第一行作为键读取并消除歧义
默认是将第一行作为键读取数据，xLsx.utils.sheet_to_json(datajson.Sheets[sheetName])读取到的数据如下：
扩展：读取复杂表头的表格
复杂表头使用，XLsx.utils.sheet_to_json(datajson.Sheets[sheetName], {header: 1}，生成二维数组
mulAnalysis (file){
return new Promise(function (resolve) {
const reader = new FileReader()
reader.onload = function(e){
const data =e.target.result
const datajson = XLSx.read(data,{type: "binary"})
const result = []
datajson.SheetNames.forEach(sheetName => {
const items = XLsx.utils.sheet_to_json(datajson.Sheets[sheetName], {header: 1}
result.push({
sheetName: sheetName,
sheet: items.splice(2, items.length)
})
})
resolve(result)
}
reader.readAsBinaryString(file.fileList[0].origin)
})
}