javascript - 通过 Response.ContentType、Response.End 输出文件时如何显示进度状态/微调器？

Question

我有一个带有下载 LinkBut​​ton 的网络表单，在按钮的点击事件中我正在获取数据，然后生成一个 .XLSX 文件 以供下载。在文件生成期间，调用 Response.Clear()，设置 Response.ContentType，最终调用 Response.End() .

我需要在该操作期间显示微调器 .gif。生成文件并弹出文件“打开/保存”对话框后，微调器不应显示。不幸的是，由于我正在更改内容类型并调用 Response.End，因此没有响应返回到页面以供使用。

任何人都可以为这种情况提供一点帮助吗？

Answer 1

实际上，我最终选择了一个不需要使用 iFrame 的解决方案。相反，我使用一个 Cookie，文件生成过程将其写入一个简单的名称值对。稍后可以通过 JavaScript 从客户端检查此 cookie，以确定响应(.xlsx 文件)何时完成。

结果应该是加载微调图像应该显示，直到 .xls 文件被生成并返回给客户端(Cookie 包含 DownloadComplete=true 名称值对)。

1. 在 LinkBut​​ton 的 OnClientClick 事件中:

   function startFileDownload(){
   
   // Set Timout for calling checkState function again
   setTimeout(checkState, 1100);
   setCookie('DownloadComplete', '', 1);
   
   // Download is starting, Hide Download LinkButton
   document.getElementById('<%= btnDownloadExcel.ClientID%>').style.display = "none";
   
   // Display progress spinner
   var img = document.getElementById("image1");
   img.src = "Images/99.GIF";
   document.getElementById('image1').className = "spinnerDisplay";
   }
   

2. 这是 checkState 函数的 JavaScript 代码:

   function checkState()
   {
       var img = document.getElementById("image1");
       var finished = getCookie("DownloadComplete");
       // Check to see if download is complete 
   if (!isEmpty(finished)) {
       setCookie('DownloadComplete', '');
       // Download is complete, Hide progress spinner
       img.className = "spinnerHide";
       document.getElementById('<%= btnDownloadExcel.ClientID%>').style.display = "";
   } else {
       // Refresh progress spinner, Set Timout for calling checkState function again
       img.src = "Images/99.GIF";
       setTimeout(checkState, 1100);
   }
   }
   

3. 这是 setCookie 和 getCookie 函数的 JavaScript 代码:

   function setCookie(cName, value){
   var now = new Date();
   var time = now.getTime();
   time += 3600 * 1000;
   now.setTime(time);
   document.cookie = cName + "=" + value 
   + '; expires=' + now.toGMTString() + '; path=/';        
   }
   
   function getCookie(cName)
   {
       var i, x, y, ARRcookies = document.cookie.split(";");
       for (i = 0; i < ARRcookies.length; i++) {
       x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
       y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
       x = x.replace(/^\s+|\s+$/g, "");
   
       if (x == cName) {
           return unescape(y);
       }
       }
   }
   

4. 然后在服务器端生成 .xlsx 文件的类中，清除 HTTP 响应后将名称值对添加到 Cookie:

    HttpContext.Current.Response.Clear();
   
    // Append a cookie that will tell the browser the file has finished processing 
    // and is included in that stream (note specific path must match same path for cookie set in JavaScript)            
    HttpCookie cookie = new HttpCookie("DownloadComplete", "true");
    cookie.Expires = DateTime.Now.AddMinutes(60);
    cookie.Path = "/";
    HttpContext.Current.Response.AppendCookie(cookie);
    //Other code here to specify the MIME type, setup the HTTP header 
    //and Response.BinaryWrite out the file
    HttpContext.Current.Response.End();