前端调用后台接口下载word文档的两种方法

 

 

                      1传统的ajax虽然能提交到后台，但是返回的数据被解析成json,html,text等字符串，无法响应浏览器下载。就算使用bob模拟下载，数据量大时也不方便

          废话不多说：上代码（此处是Layui监听提交，传统的html提交更方便）

//监听提交
form.on('submit(formDemo)', function (data) {
    layer.msg(JSON.stringify(data.field));
    //第一种方式   这种方式直接打开链接，参数后缀到后台查找，即可下载
    // window.open('/jump/download?id='+data.field.id, '_blank');


    //第二种方式   这种方式模拟表单提交，动态获取值传入后台
    try {
        var queryForm = $('#llll');
        var exportForm = $("<form action=' /jump/download' method='post'></form>")

        queryForm.find("input").each(function() {
            var name = $(this).attr("name");
            var value = $(this).val();
            exportForm.append("<input type='hidden' name='" + name + "' value='" + value + "'/>")
        });

        queryForm.find("select").each(function() {
            var name = $(this).attr("name");
            var value = $(this).val();
            exportForm.append("<input type='hidden' name='" + name + "' value='" + value + "'/>")
        });

        $(document.body).append(exportForm);
        exportForm.submit();
    } catch (e) {
        console.log(e);
    } finally {
        exportForm.remove();
    }


    //3第三种ajax提交表单，不相应浏览器下载   这种方式可以提交一个Map  去后台但是返回文件不容易下载，精通原生js的伙伴可以试试，比较麻烦，再次我就不献丑了
    // $.ajax({
    //     type:"GET",
    //     url:"/jump/download",
    //     data:JSON.stringify(data.field),
    //     contentType:"application/json;charset=UTF-8",
    //     success:function (data) {
    //
    //     }
    // });
    return false;//ajax  提交时Layui防止页面自动刷新
});

 @ApiOperation(value = "导出word文档", notes = "{\"id\":\"11\"}")
    @RequestMapping(value = "/download",method = RequestMethod.POST)
    public void download(HttpServletRequest request, HttpServletResponse response) throws IOException {

      //对应前端第三种提交方式  @RequestBody Map map 第一种方式支持前端提交过来一个Map
       Map<String, Object> userMapMeS = new HashMap<String, Object>();
//        String fileName=map.get("name").toString();
//        userMapMeS.put("name", map.get("name").toString());
//        userMapMeS.put("id", map.get("id").toString());
//        userMapMeS.put("age", map.get("age").toString());
//        userMapMeS.put("phone", map.get("phone").toString());
//        userMapMeS.put("password", map.get("password").toString());
//        userMapMeS.put("email", map.get("email").toString());
//        userMapMeS.put("times", map.get("times").toString());
//        userMapMeS.put("address", map.get("address").toString());
//        userMapMeS.put("sex", map.get("sex").toString());
//        userMapMeS.put("work", map.get("work").toString());
//        userMapMeS.put("hobby", map.get("hobby").toString());
        //对应第一种前端提交方式


// String id=request.getParameter("id");
//       Map map=new HashMap();
//       map.put("id",id);
//        User user=   userService.selectUser(map);
//        String fileName=user.getName();
//        Map<String, Object> userMapMeS = new HashMap<String, Object>();
//        userMapMeS.put("name", user.getName());
//        userMapMeS.put("id", user.getId());
//        userMapMeS.put("age", user.getAge());
//        userMapMeS.put("phone", user.getPhone());
//        userMapMeS.put("password", user.getPassword());
//        userMapMeS.put("email", user.getEmail());
//        userMapMeS.put("times", user.getTimes());
//        userMapMeS.put("address", user.getAddress());
//        userMapMeS.put("sex", user.getSex());
//        userMapMeS.put("work", user.getWork());
//        userMapMeS.put("hobby", user.getHobby());

//对应前端第二种前端模拟表单提交
       String  fileName =request.getParameter("name").toString();
        userMapMeS.put("name", request.getParameter("name").toString());
        userMapMeS.put("id", request.getParameter("id").toString());
        userMapMeS.put("age", request.getParameter("age").toString());
        userMapMeS.put("phone", request.getParameter("phone").toString());
        userMapMeS.put("password", request.getParameter("password").toString());
        userMapMeS.put("email", request.getParameter("email").toString());
        userMapMeS.put("times", request.getParameter("times").toString());
        userMapMeS.put("address", request.getParameter("address").toString());
        userMapMeS.put("sex", request.getParameter("sex").toString());
        userMapMeS.put("work", request.getParameter("work").toString());
        userMapMeS.put("hobby", request.getParameter("hobby").toString());
        String endCodeFileName = new String(fileName.getBytes("utf-8"), "ISO8859-1");
        response.reset();//清除空白行纺织报错
        response.setHeader("Access-Control-Allow-Origin", "*");//所有域都可以跨
        response.setHeader("Content-Type", "application/octet-stream;charset=UTF-8");//二进制  流文件
        response.setHeader("Content-Disposition", "attachment;filename=" + endCodeFileName+".doc");//下载及其文件名
        response.setHeader("Connection", "close");//关闭请求头连接
        //设置文件在浏览器打开还是下载
        response.setContentType("application/x-download");


        WordUtil wUtil = new WordUtil();
        long now=   System.currentTimeMillis();
        wUtil.createDoc(userMapMeS, response.getOutputStream());
        long end=  System.currentTimeMillis();
              long  ddd=end-now;
        System.out.println("ddd" + ddd);

    }

                    工具类在下篇文章