使用 XMLHttpRequest 下载文件后如何显示消息？

Question

你好社区我希望你能帮助我，因为我在下载 excel 文件后无法向用户显示消息。

我正在使用 httpRequest 向服务器发送数据，一切正常，文件已下载，但我还想要显示消息。

非常感谢您的帮助。

这是我的代码 javaScript。

function download_excel_file() {

        var file_name; //Example Test.xlsx
      
       var parameter = '{file_name:"' + file_name + '"}';
            var url = "Download.aspx/Download_File";
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function() {
                var a;
                if (xhr.readyState === 4 && xhr.status === 200) {                 
                    a = document.createElement('a');
                    a.href = window.URL.createObjectURL(xhr.response);
                   
                    a.download = file_name;
                    a.style.display = 'none';
                    document.body.appendChild(a);
                    a.click();
                    
                 // Here I want to show the message with the legend = File downloaded successfully but it does not work.
            $("[id*=message_download]").css("display","block");
            $("[id*=message_download]").text(xhr.response.Text);
                    
                }
                
            };
            
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.responseType = 'blob';
            xhr.send(parameter);           

        

    }

<input id="btn_download_file" type="button" value="Download file" class="btn btn-success btn-block" onclick="return download_excel_file();"/>

 <div id="message_download" class="p-3 mb-1 bg-secondary text-white text-center" style="display:none">                                  </div>   

这是我的服务器代码。

[WebMethod]
    public static void Download_File(string file_name)
    {
        if (file_name != null || file_name != "")
        {
            string path = HttpContext.Current.Server.MapPath("~/Folder_Excel/" + file_name);

            if (File.Exists(path))
            {
                // This is the message I want to show in the div $("[id*=message_download]")
                HttpContext.Current.Response.Write("File downloaded successfully");                  

                System.IO.FileStream fs = null;

                fs = System.IO.File.Open(path, System.IO.FileMode.Open);
                byte[] btFile = new byte[fs.Length];
                fs.Read(btFile, 0, Convert.ToInt32(fs.Length));
                fs.Close();

                HttpContext.Current.Response.AddHeader("Content-disposition", "attachment; filename=" + file_name);
                HttpContext.Current.Response.ContentType = "application/octet-stream";
                HttpContext.Current.Response.BinaryWrite(btFile);                   
                HttpContext.Current.Response.Flush();
                HttpContext.Current.Response.End();
            }
            else
            {
                HttpContext.Current.Response.Write("No files");
            }
        }         
    }

Answer 1

在脚本末尾添加“警报”：

<script>
function myFunction() {
alert("Success! File downloaded!");
}
</script>

---

添加 2019 年 10 月 04 日

---

使用 InnerHTML 和 getElementById 从服务器设置回消息。

来自https://www.w3schools.com/xml/xml_http.asp

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
     // Typical action to be performed when the document is ready:
     document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET", "filename", true);
xhttp.send();

Answer 2

您应该首先显示您的消息，然后让浏览器“点击”下载按钮。否则浏览器可能会触发 unload 事件并在此时停止执行任何脚本 - 就像重定向一样。

Answer 3

我认为您没有正确使用 属性包含选择器。

$("[id*=message_download]").css("display","block");
$("[id*=message_download]").text(xhr.response.Text);

试试这个：

$("[id*='message_download']").css("display","block");
$("[id*='message_download']").text(xhr.responseText);

或者更好的是，使用$("#message_download") 另请注意，我将xhr.response.Text 更改为xhr.responseText