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();
                }
            }
        }
    }
  • 相关阅读:
    java-第二周学习总结
    春季总结
    第十二周作业
    第十一周作业
    第十周作业
    第九周作业
    第八周作业
    网络层思维导图
    数据链路层思维导图
    Mysql数据库的基本操作之建表操作(2)
  • 原文地址:https://www.cnblogs.com/zj0208/p/5961181.html
Copyright © 2011-2022 走看看