zoukankan      html  css  js  c++  java
  • Ajax下载文件(页面无刷新)

    说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果。实质上还是通过提交form表单来返回文件流的输出。

    分步实现逻辑:

    1. ajax请求服务器,访问数据库,根据查询到的数据生成一个数据文件,返回前台一个json对象(可放置生成成功标记,文件路径等信息)。
    2. ajax success回调函数部分,根据返回的json对象,调用手写的js下载文件的方法,实现页面无刷新下载文件。

    贴上部分代码供参考:

    js代码:

    1. js写一个动态创建并提交form表单的方法,依赖于jQuery插件。

    // 文件下载
    jQuery.download = function(url, method, filedir, filename){
        jQuery('<form action="'+url+'" method="'+(method||'post')+'">' +  // action请求路径及推送方法
                    '<input type="text" name="filedir" value="'+filedir+'"/>' + // 文件路径
                    '<input type="text" name="filename" value="'+filename+'"/>' + // 文件名称
                '</form>')
        .appendTo('body').submit().remove();
    };

    2. 查询数据,输出到文件,保存到服务器,并调用download方法实现下载

    // 查询数据,输出到文件,保存到服务器,并实现下载
    function exportOilDetection() {
        var ids = ['1','2','3','4']; // 查询参数代表(可根据实际情况修改),需要导出数据的id
        $.ajax({
                type : 'POST',
                dataType : 'json',
                async : false,
                url : "${pageContext.request.contextPath}/oilDetectionAction!ajaxExportOilDetectionInfos.action", // 生成文件,保存在服务器
                data : {
                    ids : ids,
                },
                success : function(data) {
                    var result = data["data"];
                    if (result[0] == "success") {
                        // result[0] -- 文件生成成功标记
                        // result[1] -- 路径
                        // result[2] -- 文件名称
                        $.download('oilDetectionAction!ajaxDownloadDataExcel.action', 'post', result[1], result[2]); // 下载文件
                    } else {
                        alert("数据导出失败!");
                    }
                },
                error : function(XMLHttpRequest, textStatus, e) {
                    console.log("oilDetection.js  method exportOilDetection" + e);
                }
        });
    }

    action文件配置

    • ajax生成文件后,会返回json类型结果
            <action name="oilDetectionAction" class="oilDetectionAction">
                <result name="ajax" type="json">
                    <param name="root">result</param>
                </result>
                <result name="success">/page/oilDetection.jsp</result>
            </action>

    java代码:

    • 返回文件流需借助response对象,所以action类需要实现ServletResponseAware接口,并声明response对象自动注入
    public class OilDetectionAction implements ServletResponseAware {
        
        HttpServletResponse response;
        
        /**
         * 自动注入response
         */
        public void setServletResponse(HttpServletResponse response) {
            this.response = response;
        }
        
         ....
    }
    •  下载文件部分代码:
    public class OilDetectionAction implements ServletResponseAware {
        
         ....
         
        /**
         * 将生成的文件网络传输到客户端
         */
        public void ajaxDownloadDataExcel() throws IOException {
            InputStream ins = null;
            BufferedInputStream bins = null;
            OutputStream outs = null;
            BufferedOutputStream bouts = null;
            String file_name = getRequest().getParameter("file_name").trim(); // 文件名
            String file_dir = getRequest().getParameter("file_dir").trim(); // 文件路径
            System.out.println("获取到文件路径:" + file_dir + File.separator + file_name);
            try {
                if (!"".equals(file_name)) {
                    File file = new File(file_dir + File.separator + file_name);
                    if (file.exists()) {
                        ins = new FileInputStream(file_dir + File.separator
                                + file_name);
                        bins = new BufferedInputStream(ins);
                        outs = response.getOutputStream();
                        bouts = new BufferedOutputStream(outs);
                        response.setContentType("application/x-download");
                        response.setHeader(
                                "Content-disposition",
                                "attachment;filename="
                                        + URLEncoder.encode(file_name, "UTF-8"));
                        int bytesRead = 0;
                        byte[] buffer = new byte[8192];
                        while ((bytesRead = bins.read(buffer, 0, 8192)) != -1) {
                            bouts.write(buffer, 0, bytesRead);
                        }
                        bouts.flush();
                    } else {
                        throw new Exception("下载的文件不存在!");
                    }
                } else {
                    throw new Exception("导出文件时发生错误!");
                }
            } catch (Exception e) {
                log.error(e.getMessage(), e);
            } finally {
                if (null != ins) {
                    ins.close();
                }
                if (null != bins) {
                    bins.close();
                }
                if (null != outs) {
                    outs.close();
                }
                if (null != bouts) {
                    bouts.close();
                }
            }
        }
    }
  • 相关阅读:
    React生命周期, 兄弟组件之间通信
    React组件式编程Demo-用户的增删改查
    React之this.refs, 实现数据双向绑定
    CCF CSP 201812-4 数据中心
    CCF CSP 201812-4 数据中心
    PAT 顶级 1020 Delete At Most Two Characters (35 分)
    PAT 顶级 1020 Delete At Most Two Characters (35 分)
    Codeforces 1245C Constanze's Machine
    Codeforces 1245C Constanze's Machine
    CCF CSP 201712-4 行车路线
  • 原文地址:https://www.cnblogs.com/zj0208/p/5961181.html
Copyright © 2011-2022 走看看