jquery - Ajax script triggering a webmethod to download a document works in Chrome but doesn't work at all in Firefox

Question

I have got a web page in ASP.NET used to download a document. The idea is that users have to enter an email, name, etc in order to get access to that document which is being downloaded. I found on ASPSnippets.com a sample that I beef up to make it more real, meaning that instead of passing the document as element to use variable as hidden field. So far in Chrome but in Firefox it doesn't work at all.

Any idea ?

<form runat="server">

<asp:HiddenField ID="hFilename" runat="server" ClientIDMode="Static"  Value="Sample.pdf" />
<asp:TextBox ID="txtName" runat="server" ValidationGroup="gr1"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="RequiredFieldValidator" ValidationGroup="gr1"></asp:RequiredFieldValidator>

<asp:Button ID="btnNew" runat="server" Text="Button" OnClientClick="if (Validate()) { DownloadFile()}" ValidationGroup="gr1" />
        

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

      <script type="text/javascript">
          function Validate() {
              if (Page_ClientValidate()) {
                  return true;
              }
              return false;
          }
      </script>

<script type="text/javascript">
    function DownloadFile() {
        var fileName = $('#<%=hFilename.ClientID%>').val();
        
        $.ajax({
            type: "POST",
            url: "VB.aspx/DownloadFile",
            data: '{fileName: "' + fileName + '",txtName:"' + $('#<%=txtName.ClientID%>').val() + '" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                //Convert Base64 string to Byte Array.
                var bytes = Base64ToBytes(r.d);

                //Convert Byte Array to BLOB.
                var blob = new Blob([bytes], { type: "application/octetstream" });

                //Check the Browser type and download the File.
                var isIE = false || !!document.documentMode;
                if (isIE) {
                    window.navigator.msSaveBlob(blob, fileName);
                } else {
                    var url = window.URL || window.webkitURL;
                    link = url.createObjectURL(blob);
                    var a = $("<a />");
                    a.attr("download", fileName);
                    a.attr("href", link);
                    $("body").append(a);
                    a[0].click();
                    $("body").remove(a);
                }
            }
        });
    };
    function Base64ToBytes(base64) {
        var s = window.atob(base64);
        var bytes = new Uint8Array(s.length);
        for (var i = 0; i < s.length; i++) {
            bytes[i] = s.charCodeAt(i);
        }
        return bytes;
    };
</script>
    </form>

And this is the code behind:

   <WebMethod()>
Public Shared Function DownloadFile(ByVal fileName As String, ByVal txtName As String) As String
    'Set the File Folder Path.
    Dim path As String = HttpContext.Current.Server.MapPath("~")

    'Read the File as Byte Array.
    Dim bytes As Byte() = File.ReadAllBytes(path & fileName)

    'Convert File to Base64 string and send to Client.
    Return Convert.ToBase64String(bytes, 0, bytes.Length)
End Function

question from:https://stackoverflow.com/questions/65846757/ajax-script-triggering-a-webmethod-to-download-a-document-works-in-chrome-but-do

Answer 1

Waitting for answers