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

Question

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

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

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

Answer 1

应该是这样的：（其中一种解决方案）

1) 在您的页面上创建一个 iframe，它会实际下载您的文件（因此您的主页不会是空白的）

2) 向响应中添加 cookie。通过

Response.AddHeader("content-disposition", "attachment;filename=1.jpg");

3）当用户按下“下载”时，您（通过 js）设置 iframe 的 src 以下载文件。你展示了微调器。在此之后，如果有 cookie，您将通过 setInterval 开始阅读。如果有 - 下载已完成，您可以隐藏微调器。

Answer 2

实际上，我最终选择了一个不需要使用 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();