Force Download of Zip file via JQuery

I am trying to create a download of a zip file using JQuery, however everything I try just opens the zip file rather than offer it as a download in IE11.

I have to work with IE11 as that's the corporate standard.

this is the code im working with right now.

 $.ajax({
                    type: "POST",
                    url: "SubmissionTracker.aspx/ExportFile",
                    data: JSON.stringify(params),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        
                        $("#hiddenLink").attr("href", data.d);
                        console.log($("#hiddenLink").val());
                        $("#hiddenLink")[0].click();
                        $("." + excel).show();
                        $("." + loader).hide();

                    },
                    error: function (data) {
                        console.log("error :" + data);
                        console.log(data);
                        $("." + excel).show();
                        $("." + loader).hide();
                    }
                });

Open in new window


I have tried this both ways too

 <a id="hiddenLink" href="" download="Export.zip"></a>

Open in new window

and
 <a id="hiddenLink" href=""></a>

Open in new window


any ideas on how to resolve this are most welcome
LVL 1
SimonPrice3376Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Julian HansenConnect With a Mentor Commented:
I don't think trigger click works the way you would expect when applied to an <a> element - I am assuming you want this to start a download.

Rather do this on line 9
window.location.href = data.d

Open in new window


This will redirect the page to the zip file - but because it is a download the page won't navigate away.
0
 
Julian HansenCommented:
This sample code might be of assistance from this question
      $scope.getFile = function () {
        $http.get(
          't1469.php',
          { 
            responseType: 'arraybuffer' 
          }
        ).then(function successCallBack(response) {    
          var octetStreamMime = 'application/octet-stream';
          // Get the headers
          var headers = response.headers();
          // Get the filename from the header.
          var contentDisposition = headers['content-disposition'];
          var fileName = contentDisposition.substring(21, contentDisposition.length);
          // Determine the content type from the header or default to "application/octet-stream"
          var contentType = headers['content-type'] || octetStreamMime;
          try {
            var file = new Blob([response.data], { type: contentType });
            if (navigator.msSaveBlob) {
              navigator.msSaveBlob(file, fileName);
            }
            else {
              alert('Your browser does not support msSaveBlob. Try Internet Explorer");
            }
          }
          catch (ex) {
          }
        // ADDED MISSING '}'
        },
        function errorCallBack(response) {
          console.log(response);

          var modalOptions;
          modalOptions = {
            includeCloseButton: true,
            closeButtonText: 'Close',
            headerText: 'Error Message',
            bodyText: 'An error occured while retrieving the file.  Please review the error log for details.'
          };
          modalMessageService.showModal({}, modalOptions);
        });
      }    

Open in new window

There is a working sample here

The code will only work on IE - it uses the msSaveBlob call
0
All Courses

From novice to tech pro — start learning today.