button实现文件下载

在点击按钮之后，给后台发出下载文件的请求。

一、需求

    页面有个 table，是综合统计计算而来的产物，现在想把它已 excel 的方式导出来，excel 有样式要求，为了图省事，导出的操作就放在后台逻辑来处理。

    数据查询复杂，所以就直接将数据传递给后台，然后由后台封装再下载。

</p>

二、实现

    起初想的是 ajax，但是否定了，因为 ajax 请求是不能够返回文件流的，由于有很大的数据做参数进行传递，所以就使用的讨巧的方式——form 表单提交。

    原理就是生成一个临时的 form 表单，表单的提交是可以返回文件下载功能的。

    如下贴代码:

<button&nbsp;type="button"&nbsp;class="btn&nbsp;btn-primary"&nbsp;onclick="exportComprehensiveTable()">导出</button>

    // 导出表格信息
   function exportComprehensiveTable(){
      var comprehensiveTableData = $('#comprehensive_table').bootstrapTable('getData');
      if (comprehensiveTableData.length > 0) {
          $('.exportComprehensiveTableBtn').attr('disabled','disabled');
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;form=$("<form>");//定义一个form表单
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form.attr("style","display:none");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form.attr("target","");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form.attr("method","post");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form.attr("action","/customer/comprehensive/download");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;input1=$("<input>");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input1.attr("type","hidden");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input1.attr("name","exportData");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input1.attr("value",(JSON.stringify(comprehensiveTableData)));
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("body").append(form);//将表单放置在web中
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form.append(input1);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form.submit();//表单提交
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;form.remove();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function&nbsp;()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;.exportComprehensiveTableBtn&#39;).removeAttr(&#39;disabled&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hideOverLay();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;1000);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;}

@PostMapping("/comprehensive/download")
public&nbsp;ResponseEntity<InputStreamResource>&nbsp;downloadComprehensive(@RequestParam(name&nbsp;=&nbsp;"exportData")&nbsp;Object&nbsp;data)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;String&nbsp;fileName&nbsp;=&nbsp;"综合统计.xlsx";
&nbsp;&nbsp;&nbsp;&nbsp;InputStream&nbsp;is&nbsp;=&nbsp;customerService.downloadComprehensive(JSON.parseObject(data.toString(),&nbsp;List.class));
&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(is&nbsp;==&nbsp;null)&nbsp;return&nbsp;null;
&nbsp;&nbsp;&nbsp;&nbsp;HttpHeaders&nbsp;headers&nbsp;=&nbsp;new&nbsp;HttpHeaders();
&nbsp;&nbsp;&nbsp;&nbsp;try&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;headers.add("Content-Disposition",&nbsp;"attachment;filename="&nbsp;+&nbsp;URLEncoder.encode(fileName,&nbsp;"utf-8"));
&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;catch&nbsp;(UnsupportedEncodingException&nbsp;e)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.printStackTrace();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;null;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;headers.add("content-type",&nbsp;"application/octet-stream");
&nbsp;&nbsp;&nbsp;&nbsp;headers.add("Cache-Control",&nbsp;"no-cache,&nbsp;no-store,&nbsp;must-revalidate");
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;ResponseEntity
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.ok()
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.headers(headers)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.contentType(MediaType.parseMediaType("application/octet-stream"))
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.body(new&nbsp;InputStreamResource(is));
}