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

╰半橙微兮° 2023-09-28 07:58 129阅读 0赞

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

使用element的el-dialog弹窗样式

![e2ad597c2639430ab37468b503141f29.png][]

<el-dialog
 	 title="投诉信访"
 	 :visible.sync="dialogVisible"
 	 width="30%"
 	 :before-close="handleClose">
 	 请注意导入成功后将自动删除原有全部数据！
 	 <label style="display: inline-block; margin: 0 20px;">选择文件</label>
 	 <el-button type="primary" @click="query">文件上传</el-button>
 	 <el-button @click="reset">模板下载</el-button>
 		<input
 			id="previewImg"
 			type="file"
 			accept=".pdf,.word,.Excel,.xlc,.xlm,.wps,.xls,.xlsx"
 			style="display: none"
 			@change="previewImage(this)"
 		/>
 		{
 { name }}   
 	 
 	 <el-button @click="dialogVisible = false">取 消</el-button>
 	 <el-button type="primary" @click="excelImportBut()" :loading="loadingExcel">确 定</el-button>
 	 
 	</el-dialog>

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;
    		 })
    },

[e2ad597c2639430ab37468b503141f29.png]: https://img-blog.csdnimg.cn/e2ad597c2639430ab37468b503141f29.png