Form表单下载文件

需求

前端传递一个参数,后台通过该参数查询数据库数据(文件路径),然后找到该文件通过流的形式返回给浏览器,浏览器直接触发下载。

前端参考代码
downloadFile(params, url) { 
        var form = document.createElement("form");
        form.style = "display:none;";
        form.action = url;
        form.method = "post";
        form.target = "form_iframe"
        document.body.appendChild(form);
       if(!document.getElementById("form_iframe")){
          var ifreame = document.createElement("iframe")
          ifreame.id = "form_iframe";
          ifreame.name = "form_iframe";
          ifreame.style ="display:none;"
          document.body.appendChild(ifreame);
       }
        // 动态创建input并给value赋值
        for (var key in params) {
          var input = document.createElement("input");
          input.type = "hidden";
          input.name = key;
          input.value = params[key];
          form.appendChild(input);
        }
        form.submit();
        form.remove();
      }
    }
后台代码
//前台只传一个参数doctype
@RequestMapping(value="/downloadTemp.do")
public void downloadTemp(HttpServletResponse response, @RequestParam("doctype") String doctype) {

        OutputStream out = null;
        InputStream in=null;
        try {
            //获取数据
            TempInfoBean temp = doctypeDBService.getTmpInfo(doctype);
//			String fileName = "Excel-" + String.valueOf(System.currentTimeMillis()).substring(4, 13) + ".xls";
            //文件路径
            String fileName = temp.getFileName();
            String headStr = "attachment; filename=\"" + fileName + "\"";
//            response.setContentType("APPLICATION/vnd.ms_excel;charset=utf-8");
            response.setContentType("APPLICATION/force-download;charset=utf-8");
            response.setHeader("Content-Disposition", headStr);
            in = new FileInputStream(temp.getFilePath());
            int len=0;
            byte buffer[]=new byte[1024];
            out=response.getOutputStream();
            while((len=in.read(buffer))!=-1){
                out.write(buffer,0,len);
            }
        } catch (Exception e) {
//            e.printStackTrace();
            log.error(e.getMessage());
        }finally {
            if(in!=null){
                try {
                    in.close();
                } catch (IOException e) {
//                    e.printStackTrace();
                    log.error(e.getMessage());
                }
            }
        }
    }
所遇问题
  1. 原本是使用ajax请求,但是因为ajax的返回值类型是json,text,html,xml类型,不能流类型,返回全是乱码,所以无法实现文件下载,故使用动态生成表单形式
  2. 因为表单默认数据编码类型为application/x-www-form-urlencoded,所以后台使用@RequestParam注解而不能使用@RequestBody(该注解对应application/json类型)
    参考博文
  3. 因本需求只有一个参数,所以后台接口只接收一个明确参数doctype,如果有多个参数,可在前台把数据转为一个json字符串,然后以一个参数的形式传给接口,后台接收该字符串然后解析json转为Map或者实体对象。
    参考博文
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现jqueryform表单提交下载文件,可以采用以下步骤: 1. 在前端页面中添加一个表单,用于提交下载文件的请求。 2. 使用jqueryform插件将表单序列化并发送到后台。 3. 后台接收到请求后,根据表单中的参数生成需要下载文件,并将文件保存到服务器端。 4. 后台将生成的文件路径返回给前端。 5. 前端使用window.open()方法打开返回的文件路径即可实现文件下载。 以下是示例代码: 前端代码: ``` <form id="downloadForm" action="/downloadFile" method="post"> <input type="hidden" name="fileName" value="example.txt"> <input type="hidden" name="fileContent" value="This is an example file."> <input type="submit" value="Download"> </form> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script> <script> $(document).ready(function(){ $("#downloadForm").submit(function(e){ e.preventDefault(); $(this).ajaxSubmit({ success: function(data){ window.open(data); } }); }); }); </script> ``` 后台代码: ``` @RequestMapping(value = "/downloadFile", method = RequestMethod.POST) @ResponseBody public String downloadFile(@RequestParam("fileName") String fileName, @RequestParam("fileContent") String fileContent, HttpServletRequest request, HttpServletResponse response) throws Exception { // 生成文件并保存到服务器端 String filePath = "/path/to/file/" + fileName; File file = new File(filePath); FileWriter writer = new FileWriter(file); writer.write(fileContent); writer.flush(); writer.close(); // 返回文件路径 return filePath; } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值