根据示例来实现效果

上传Excel,并下载模板
依赖:npm install xlsx --save
第一:为了快速方便的吧 Excel的内容代入到表格里,实现效果,点击上传Excel按钮。
第二:下载Excel模板,首先,本地的文档存进项目里,最好是放在public目录下,避免项目打包的时候,被压缩篡改。
第三:话不多说,代码展示如下,请自行摘要
<template>
<div>
<el-upload
class="upload-demo"
ref="upload"
action=""
:format="['xls','xlsx']"
accept=".xls,.xlsx"
:auto-upload="false"
:file-list="fileList"
:on-change="handleChange"
multiple
:show-file-list="false"
>
<el-button class="pan-btn yellow-btn ">上传Excel</el-button>
</el-upload>
<button @click="downloadTemplate" class="pan-btn blue-btn mx-3">下载Excel模板</button></div>
</template>
export default {
name: "index",
data () {
return {
fileList: [],
file: []
},
methods: {
downloadTemplate(){
//注意路径,前面不要加 ./ 会形成相对路径,点击下载不了。
window.open('/online.xls', '_blank')
},
handleChange(file,fileList){
this.loading= true
this.show= true
let data= []
this.fileList= [fileList[fileList.length- 1]]; // 只能上传一个Excel,重复上传会覆盖之前的
this.file= file.raw;
let reader= new FileReader()
let _this= this
reader.readAsArrayBuffer(this.file)
reader.onload= function () {
let buffer= reader.result
let bytes= new Uint8Array(buffer)
let length= bytes.byteLength
let binary= ''
for (let i= 0; i< length; i++) {
binary+= String.fromCharCode(bytes[i])
}
let XLSX= require('xlsx')
let wb= XLSX.read(binary, {
type: 'binary'
})
let outdata= XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
console.log('这是上传表格', outdata)
}
}
}
}
网友评论