专栏首页angularejs学习篇ajax+ashx:实现文件的批量导出

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;
            }
        }
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 聊聊字符串拼接的哪一些事儿

    ​ 字符串对我编程人员来说是字符串时每天见面的常客,你不认识不熟悉他都不得行,字符串的拼接更是家常便饭,那么在实际开发过程中实现字符串的拼接有哪一...

    小小许
  • 关于表单重复提交问题

    问题引入:当我们在做一个页面数据提交的时候,当我们连续点击提交按钮,因为快速连续点击,因为速度过快,页面还来不及反应,导致页面从复提交。。

    小小许
  • 我叫Mongo,干了「索引探索篇」提升我的效率,值得您拥有

      Mongodb的索引和其它关系型数据库索引很类似,索引是一个存储结构,其存储的内容是数据文档持久化的位置信息。一个数据集合和一本书来对比,那么索引就是书对应...

    小小许
  • Go语言中三种不同md5计算方式的性能比较

    前言 本文主要介绍的是三种不同的 md5 计算方式,其实区别是读文件的不同,也就是磁盘 I/O, 所以也可以举一反三用在网络 I/O 上。下面来一起看看吧。 R...

    李海彬
  • 《JavaScript高级程序设计》读书笔记

    script 脚本中不要嵌入出现"" 字符串,会被错误识别为结束标签。正确写法是:"<\/script>"。

    心谭博客
  • javascript设计模式一: 单例模式

    作为一个半路出家的前端,随着项目经验的积累,也越来越意识到原生js的博大精深,最近正在研究js设计模式,接下来每学一个设计模式就是写篇文章做笔记,其实主要还是代...

    前端_AWhile
  • Go语言中三种不同md5计算方式的性能比较

    前言 本文主要介绍的是三种不同的 md5 计算方式,其实区别是读文件的不同,也就是磁盘 I/O, 所以也可以举一反三用在网络 I/O 上。下面来一起看看吧。 R...

    李海彬
  • 十个超级实用的 ES6 特性

    “ 关注 前端开发社区 ,回复 '领取资源',免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步

    前端老道
  • 【JS】635- 十个超级实用的 JS 特性

    翻译内容转载自 New Frontend:https://nextfe.com/morden-js/

    pingan8787
  • Golang Leetcode 606. Construct String from Binary Tree.go

    更多内容请移步我的repo:https://github.com/anakin/golang-leetcode

    anakinsun

扫码关注云+社区

领取腾讯云代金券