前端調用后台接口下載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);

 }

 工具類在下篇文章