文件导出传值的get和post方式的写法(无状态化，前端vue)

通常对于excel、word类文件的导出，前端使用的是form提交数据的方式，使用的是post，还有一种方式就是url拼接参数，使用的是get方法。

get导出方式

前台使用过ajax的get方式传值，需要注意的是：该方式是将后台的数据流在前台重写了一次，所以文件名称需要在前台给定。

getExcel() {
      this.$axios({
        method: "get",
        url:
          url.OBJAPIURL +
          "/exportView?start_Date=" +
          this.form.startDate +
          "&end_Date=" +
          this.form.endDate +
          "&Title=" +
          this.title +
          "&source=" +
          this.source_result,
        responseType: "blob"
      }).then(res => {
        /* let blob = new Blob([res.data], {type: "application/vnd.ms-excel;charset=utf-8"});*/
        /*  console.log(blob);
                 window.location.href = URL.createObjectURL(blob);*/
        let url = window.URL.createObjectURL(res.data);
        let link = document.createElement("a");
        if (this.form.source_result != "" && this.form.source_result != null) {
          link.download =
            "测试文件--" + this.form.source_result + ".xls";
        } else {
          link.download = "测试文件.xls";
        }
        link.href = url;
        link.click();
      });
    }

后台代码如下

@GetMapping("/exportDetail")
    public void exportDetail(HttpServletRequest request, HttpServletResponse response, @RequestParam("start_Date") String start_Date, @RequestParam("end_Date") String end_Date, @RequestParam("source") String source) throws Exception {
        
        HSSFWorkbook wbs = new HSSFWorkbook();
        //略去文件生成的逻辑代码
        try {
            //设置响应
            this.setResponseHeader(response, filename);
            OutputStream os = response.getOutputStream();
            //将文件写入流中
            wbs.write(os);
            os.flush();
            os.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


    //发送响应流方法
    public void setResponseHeader(HttpServletResponse response, String fileName) {
        try {
            try {
                fileName = new String(fileName.getBytes(), "ISO8859-1");
            } catch (UnsupportedEncodingException e) {
                e.printStackTrace();
            }
            response.setContentType("application/octet-stream;charset=ISO8859-1");
            response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
            response.addHeader("Pargam", "no-cache");
            response.addHeader("Cache-Control", "no-cache");
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

post请求方式

前台代码如下

<template>
	<div class="operatingBox" style="float: right">
		<el-button type="danger" size="mini" @click="excelOut">导出</el-button>
	</div>
</template>

<script>
    //qs为vue自带组件
	import qs from 'qs';
	import url from '@/js/url';
	import utils from '@/js/utils';
	export default {
		props:['searchName'],
		data() {
			return {
				//导出
				formAct: '',//地址
				str: ''//参数
			}
		},
	methods: {
		//导出
		excelOut() {
			let formObj = {};
			formObj.pageNum = this.currentPage+"";
			formObj.pageSize = this.pagesize;
			formObj.op_start_time = this.searchName.initiateStart;
			formObj.op_end_time = this.searchName.initiateEnd;
			formObj.service_type = this.searchName.complaintValue;
			formObj.cp_start_time = this.searchName.complaintStart;
			formObj.cp_end_time = this.searchName.complaintEnd;
			formObj.deal_link = this.searchName.orderValue;
			formObj.keywords = this.searchName.searchN;
			formObj.dhv="";
			formObj.ensure_event=this.checkListVal;
			this.str = JSON.stringify(formObj);
			this.$axios.post(this.formAct, qs.stringify({str:this.str}), {
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded', //请求的数据类型为form data格式
				},
				'responseType': 'blob'  //设置响应的数据类型为一个包含二进制数据的 Blob 对象，必须设置！！！
			}).then(res => {
				let blob = new Blob([res.data], {type: "application/vnd.ms-excel;charset=utf-8"});
				/*  console.log(blob);
				window.location.href = URL.createObjectURL(blob);*/
				let url =window.URL.createObjectURL(blob);
				let link = document.createElement('a');
				link.download = '测试文件.xls';
				link.href = url;
				link.click();
			});
	  }
	},
	mounted () {
	
	}
}
</script>

后台部分代码同get方式导出类似，这里就不贴出了。