嘎里三分熟
  • 首页
  • JMusic
  • TSBay
  • 常用工具
  • About Me
  • 留言板
一行代码一世浮生
  1. 首页
  2. Java web
  3. JavaScript
  4. 正文

button实现文件下载

2018年01月30日 2705点热度 14人点赞 0条评论

一、需求

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

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

二、实现

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

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

    如下贴代码:

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

    // 导出表格信息
   function exportComprehensiveTable(){
      var comprehensiveTableData = $('#comprehensive_table').bootstrapTable('getData');
      if (comprehensiveTableData.length > 0) {
          $('.exportComprehensiveTableBtn').attr('disabled','disabled');
          var form=$("<form>");//定义一个form表单
          form.attr("style","display:none");
          form.attr("target","");
          form.attr("method","post");
          form.attr("action","/customer/comprehensive/download");
          var input1=$("<input>");
          input1.attr("type","hidden");
          input1.attr("name","exportData");
          input1.attr("value",(JSON.stringify(comprehensiveTableData)));
          $("body").append(form);//将表单放置在web中
          form.append(input1);
          form.submit();//表单提交
          form.remove();
          setTimeout(function () {
             $('.exportComprehensiveTableBtn').removeAttr('disabled');
              hideOverLay();
          }, 1000);
      }
   }
@PostMapping("/comprehensive/download")
public ResponseEntity<InputStreamResource> downloadComprehensive(@RequestParam(name = "exportData") Object data) {
    String fileName = "综合统计.xlsx";
    InputStream is = customerService.downloadComprehensive(JSON.parseObject(data.toString(), List.class));
    if (is == null) return null;
    HttpHeaders headers = new HttpHeaders();
    try {
        headers.add("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "utf-8"));
    } catch (UnsupportedEncodingException e) {
        e.printStackTrace();
        return null;
    }
    headers.add("content-type", "application/octet-stream");
    headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
    return ResponseEntity
            .ok()
            .headers(headers)
            .contentType(MediaType.parseMediaType("application/octet-stream"))
            .body(new InputStreamResource(is));
}
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: JS 文件下载
最后更新:2018年01月30日

GoldenJet

爱折腾技术的90后漫威小死忠程序员一枚

点赞
< 上一篇
下一篇 >

文章评论

取消回复

通过电子邮件订阅博客

分类目录
  • BootStrap (2)
  • Bug集中营 (6)
  • Java web (3)
  • JavaScript (7)
  • Java基础 (17)
  • Java工具 (5)
  • Linux (3)
  • Python (3)
  • SpringBoot (14)
  • Spring基础 (8)
  • thymeleaf (1)
  • 娱乐 (3)
  • 小谈 (2)
  • 常用工具 (7)
  • 技术分析集 (5)
  • 技能 (10)
  • 源码 (4)
  • 科普类 (1)
  • 算法 (9)
  • 踩坑记 (5)
文章归档
  • 2020年11月 (1)
  • 2020年7月 (1)
  • 2020年4月 (2)
  • 2020年3月 (1)
  • 2020年1月 (1)
  • 2019年11月 (1)
  • 2019年10月 (1)
  • 2019年9月 (1)
  • 2019年8月 (1)
  • 2019年7月 (2)
  • 2019年5月 (2)
  • 2019年4月 (2)
  • 2019年3月 (3)
  • 2019年2月 (2)
  • 2019年1月 (2)
  • 2018年12月 (2)
  • 2018年11月 (3)
  • 2018年10月 (3)
  • 2018年9月 (2)
  • 2018年8月 (3)
  • 2018年7月 (2)
  • 2018年5月 (1)
  • 2018年4月 (3)
  • 2018年3月 (2)
  • 2018年2月 (3)
  • 2018年1月 (5)
  • 2017年12月 (2)
  • 2017年11月 (3)
  • 2017年10月 (1)
  • 2017年9月 (1)
  • 2017年8月 (1)
  • 2017年7月 (7)
  • 2017年6月 (5)
  • 2017年5月 (1)
  • 2017年4月 (2)
  • 2017年3月 (4)
  • 2017年2月 (2)
小伙伴友链
  • 前端驿站

COPYRIGHT © 2017-2020 嘎里三分熟. ALL RIGHTS RESERVED.

浙ICP备17005575号-1

浙公网安备 33010802009043号