Vue实现excel文件的导出功能（后端直接返回文件流）

后台管理系统常见的导入功能

 使用element的el-dialogd窗样式

	
	    
请注意导入成功后将自动删除原有全部数据！
	    选择文件
	    文件上传
	    模板下载
		
		
{{ name }}   
	    
	        取 消
	        确 定
	    
	
	

export default {
    data() {
      return {
        dialogVisible: false,
        name:'',
        loadingExcel:false,
        formdata:''
      }
    },
    methods:{
        handleClose(){
	      this.dialogVisible = false;
	    },
        query(){ //文件上传
		  document.querySelector('#previewImg').click();
	    },
        reset(){ //文件删除
		  window.open();
	    },
        deleteIcon(){ //删除上传文件
		  this.name = '';
		  document.getElementById('previewImg').value='';
	    },
        async excelImportBut(){
		  if(this.name == ''){
			  return;
		  }
		  this.loadingExcel = true;
		  var data = await postExcelImport(this.formdata); //接口请求
		  this.dialogVisible = false;
		  this.$message({type: 'success',message: '导入文件成功'});
		  this.loadingExcel = false;
	    },
    }
}

导出功能实现 

//api 设置
export async function getExport(params) {
  return request({
    url: toConfigure.prefix+'/complaints/export',
    method: 'get',
    params,
	responseType: 'blob' //在路由拦截器上判断是否文件
  }).then((response) => { // 处理返回的文件流
    const blob = response;
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = '投诉信访管理'
    document.body.appendChild(link)
    link.click()
    window.setTimeout(function() {
      URL.revokeObjectURL(blob)
      document.body.removeChild(link)
    }, 0);
	return 200;
  })
}

//后台返回 type 必须是这种格式 "application/vnd.ms-excel"
size: 73581
type: "application/vnd.ms-excel"

exportBut(){ //导出
		 this.loadingShow = true;
		 var dataObj = this.queryForm;
		 delete(dataObj.pageNo);
		 delete(dataObj.pageSize);
		 delete(dataObj.limit);
		 Object.keys(dataObj).map((item)=>{
		     if(dataObj[item] == '' || dataObj[item] == null){
		         delete dataObj[item] //去空值
		     }
		 });
		 getExport(dataObj).then(response => {
			this.$message({type: 'success',message: '导出成功！'});
			this.loadingShow = false;
		 })
},