zoukankan      html  css  js  c++  java
  • 前端调用后台接口下载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);

    }
                        工具类在下篇文章

    一点点学习,一丝丝进步。不懈怠,才不会被时代淘汰
  • 相关阅读:
    echarts 报表使用
    Eclipse Java注释模板设置详解
    简单实现支付密码输入框 By HL
    一个label 混搭不同颜色,不同字体的文字.. by 徐
    有关MVC设计模式 #DF
    自定义粘贴板-陈鹏
    TableView 常用技巧与功能详解
    ios 类别和扩展-赵小波
    推荐一本书--《浪潮之巅》(完整版的哦)----董鑫
    iOS block的用法 by -- 周傅琦君
  • 原文地址:https://www.cnblogs.com/wangbiaohistory/p/11761855.html
Copyright © 2011-2022 走看看