1. 程式人生 > >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;
            }
        }
    }