• ajax+ashx:实现文件的批量导出


    背景:

      最近公司有一个需求,就是实现excle的批量导出(一次性导出多个excle)。

    实现方式:

      想到的实现方式:

      1、发起一个导出请求,然后批量生产需要导出的excle文件,最后将文件生成一个压缩包,最后将生成的压缩包输出到前端页面。

         该方式的优缺点:

          优点:对应用户来说,只需要接受一个压缩包即可

          缺点:后端在处理逻辑上变得复杂

                需要考虑多线程处理

                需要引入生成压缩包逻辑

                需要生成零时文件

              如果用户没有按照解压工具,文件不能正常打开

      2、需要导出多个excle时,前端发出多个导出文件请求

         该方法的优缺点:

          优点:功能逻辑变得根据加单,单一

          缺点:用户会接受到多个文件

      综合开发进度及其各方面,最后我们采用了方案2

      下面我整理一下方案2的实现DEMO,不过很多也是在网上找的原型

    前端代码:

      

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="Scripts/jquery-1.10.2.min.js"></script>
        <script>
            $(function () {
                $("#Button1").click(function () {//点击下载按钮
                   
                    //// 每一个导出的文件间隔时间
                    let triggerDelay = 100;
    
                    //// 动态生成的导出文件的form表单自动删除时间
                    //// 备注,这个时间间隔不能太短,因为太短,当移除掉forem表单时,如果文件还未导出,因为与后端链接中断而导致导出失败
                    let removeDelay = 300000;
                    let url_arr = ['Handler1.ashx?', 'Handler1.ashx'];
                   
                    url_arr.forEach(function (item, index) {
                        _createIFrame(item, index * triggerDelay, removeDelay);
                    })
                    function _createIFrame(url, triggerDelay, removeDelay) {
                        //动态添加iframe,设置src,然后删除
                        setTimeout(function () {
                            var frame = $('<iframe style="display: none;" class="multi-download"></iframe>');
                            frame.attr('src', url);
                            $(document.body).after(frame);
                            setTimeout(function () {
                                frame.remove();
                            }, removeDelay);
                        }, triggerDelay);
                    }
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input id="Button1" type="button" value="下载" />
            </div>
        </form>
    </body>
    </html>
    

      

    后端代码:

      此处后端代码先直接下载一个本地的excl文件,后续会单独写一遍关于如何生成excle的帖子

        /// <summary>
        /// Handler1 的摘要说明
        /// </summary>
        public class Handler1 : IHttpHandler {
    
            public void ProcessRequest(HttpContext context) {
             
                string s_fileName = "222.xlsx";
                HttpContext.Current.Response.ContentType = "application/ms-download";
                string s_path = HttpContext.Current.Server.MapPath(s_fileName);
                System.IO.FileInfo file = new System.IO.FileInfo(s_path);
                HttpContext.Current.Response.Clear();
                HttpContext.Current.Response.AddHeader("Content-Type", "application/octet-stream");
                HttpContext.Current.Response.Charset = "utf-8";
                HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment;filename="
              + System.Web.HttpUtility.UrlEncode("222.xlsx", System.Text.Encoding.UTF8));
                HttpContext.Current.Response.AddHeader("Content-Length", file.Length.ToString());
                HttpContext.Current.Response.WriteFile(file.FullName);
                HttpContext.Current.Response.Flush();
                HttpContext.Current.Response.Clear();
                HttpContext.Current.Response.End();
            }
    
            public bool IsReusable {
                get {
                    return false;
                }
            }
        }
    

      

  • 相关阅读:
    js-禁止微信H5页面点击右上角菜单时出现“复制链接”,且分享仅支持微信分享
    js-获取用户移动端网络类型:wifi、4g、3g、2g...
    小程序-云开发部署流程(步骤二)
    小程序-(报错)请使用 2.2.3 或以上的基础库以使用云能力(步骤一)
    解决iOS10的Safari下Meta设置user-scalable=no无效的方法
    领域驱动, 事件驱动,测试驱动
    spring web项目中整合netty, akka
    why rpc
    nginx配置https证书
    org.apache.http.NoHttpResponseException
  • 原文地址:https://www.cnblogs.com/xiaoXuZhi/p/ajax_ashx_downLoadFile.html
Copyright © 2020-2023  润新知