vueexcel的导⼊与模板下载
最近遇到个新需求，做excel导⼊，效果⼊下图
这边我把excel整成⼀个通⽤组件
<template>
<div>
<el-dialog class="excelBox" center :visible.sync="excelDialogVisible" width="60%" :title="titleName"  :before-close="close" :close-on-press-escape="fal se" :close-on-click-modal="false">
<span class="remarkSpan">注：{{tip}}</span>
<div class="btnBox">
<cat-Form
class="excelDialog"
size='small'
labelWidth = 'auto'
labelPosition='left'
:isInline="true"
:searchHandle="searchHandle"
:searchAliUpload="searchAliUpload">
</cat-Form>
</div>
<cat-table
id="excel"
class="catTable excelTable"
:columns="lumns"
:list="catTableData.list">
</cat-table>
</el-dialog>
</div>
</template>
<script>
import catForm from '@/components/common/form.vue'
import catTable from '@/components/common/table.vue'
import XLSX from 'xlsx'
import {mapGetters,mapActions} from 'vuex'
import FileSaver from 'file-saver';
export default {
components:{catForm,catTable},
computed:{
...mapGetters("projectData", {
'projectDetailData':'projectDetailData',
})
},
props:{
excelDialogVisible:{
type:Boolean,
default:false
default:false
},
titleName:{
type:String,
defalult:''
},
tip:{
type:String,
default:'请先下载模板⽂件后进⾏导⼊，⽂件格式如下所⽰'
},
catTableData:{
type:Object,
default:()=>{}
},
downLoadUrl:{
type:String,
default:''
}
},
data(){
return{
searchHandle:[
chrome直接下载
{text:'模板下载',buttonType:'primary',handle:()=>this.downLoad(),class:'baseBtn'},
],
searchAliUpload:[{type:'aliUpLoadNobig',prop:'uploadImg',label:'',handle:()=>this.upload,text:'导⼊'}],            excelData:[]
}
},
methods:{
close:function(){
this.$emit('close')
},
downLoad:function(){
FileSaver.saveAs(this.downLoadUrl, this.titleName);
},
upload:function(param){
// this.percentage=0
this.fileResolve(param).then((res)=>{
this.checkFile(res)
})
},
// ⽂件解析
fileResolve(param){
let _this = this
return new Promise((resolve,reject)=>{
var files = param.file;
var fileReader = new FileReader();
try {
var data = sult,
workbook = ad(data, {
type: 'binary'
}), // 以⼆进制流⽅式读取得到整份excel表格对象
persons = []; // 存储获取到的数据
} catch (param) {
_this.$(`⽂件类型不正确`)
return;
}
// 表格的表格范围，可⽤于判断表头是否数量是否正确
var fromTo = '';
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
if (workbook.Sheets.hasOwnProperty(sheet)) {
fromTo = workbook.Sheets[sheet]['!ref'];
persons = at(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
}
}
}
return resolve(persons)
};
// 以⼆进制⽅式打开⽂件
})
},
// 检查⽂件
checkFile(res){
console.log('res',res)
lData.length===0){
this.$('上传的内容不能为空')
return false
}
this.$emit('excelImport',lData)
}
}
}
⽂件导⼊字段校验，并且把导⼊的内容获取⾥⾯的数据，然后转成后端需要的字段名称

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。