尝试从后端向前端发送 zip

Question

At one point in my ember.js webapp the user is given the option to download a zip file. On clicking the button, an action is triggered that sends a request to the backend server, which generates the zip and returns it. Ideally the zip should then be downloaded automatically.

In my backend endpoint I return with

return Response
        .ok(FileUtils.readFileToByteArray(new File(tmpZipFilename))) // tmpZipFilename is a String
        .type("application/zip")
        .header("Content-Disposition", "attachment; filename=\"" + finalZipFilename + "\"")
        .build();

In the frontend I have (adapted from here )

submit() {
  var formData = new FormData(this);
  let token = this.get('session.data.authenticated.token');
  jquery.ajax({
    url: `myUrl`,
    data: formData,
    processData: false,
    contentType: false,
    beforeSend: function(xhr) {xhr.setRequestHeader('Authorization', `Bearer ${token}`)},
    type: 'POST',
    success: function(data) {
      var blob = new Blob([data], {type: 'application/zip'});
      let a = document.createElement("a");
      a.style = "display: none";
      document.body.appendChild(a);
      let url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = 'myFile.zip';
      a.click();
      window.URL.revokeObjectURL(url);
    },
    failure: function() {
      // other stuff
    }
  })
}

The response headers are the following:

HTTP/1.1 200 OK
X-Powered-By: Undertow/1
Cache-Control: no-store
Date: Tue, 19 Feb 2019 16:34:35 GMT
Server: WildFly/10
Content-Type: application/zip
Content-Disposition: attachment; filename="filename.zip"
Connection: close
Transfer-Encoding: chunked

I have confirmed that tmpZipFilename in the backend section does correctly point to a proper zip file. And when the user clicks the download button a file called myFile.zip is indeed downloaded. However, the file downloaded is not unzippable and is a different size than the correct file pointed to by tmpZipFilename . What am I doing wrong?

Answer 1

The answer was to simply add dataType: 'arraybuffer' :

...
jquery.ajax({
    url: 'myUrl',
    data: formData,
    processData: false,
    contentType: false,
    dataType: 'arraybuffer',
    beforeSend: function(xhr) {
...

Answer 2

实际上下载文件的最佳解决方案是调用window.open 。

Answer 3

IF your API is returning an actual file, and you have the content type and disposition set correctly, you can just create a natural link in the frontend to the api endpoint, or use a standard form and not an AJAX request, as the file download will trigger and you will stay in the same place as far as the widow is concerned.

For option one:

<a href="<API_ENDPOINT>?token=<token>&param1=something&param2=something">download</a>

This can work by binding the parameters to the url string. However I would advise against this method unless you have a way to create SIGNED SINGLE USE GET AUTHENTICATION TOKENS as you should never be sending access tokens anywhere readable.

Option 2 is to create a generic HTML form where the action is the api endpoint, where you can pass the token in post data. If you API endpoint simple returns a proper file, when the form is submitted the file should download, and you should be able to stay on the same page.

<form action="<API ENDPOINT>" method="post">
  <!-- Standard input types named appropriately
</form>

These are just a couple of solutions. I personally like option 1 but only if you can get it working securely. Research HMAC auth methods to create this single use token if you can store and manage a nonce of some kind on the back end. Works well with JWTs.