Content-Disposition：自动下载文件

Question

The API call to the server is returning a zip file with Content-Disposition in format attachment, <filename> I am using FileSaver's saveAs to save the file.

    this.ajax.raw(requestUrl, {
        dataType: 'binary',
        xhr: () => {
          const myXhr = $.ajaxSettings.xhr()
          myXhr.responseType = 'blob'
          return myXhr
        }
      }).then((response) => {
        this.downloadSuccess(response, minTimeString, maxTimeString, downloadCompletedMessage)
      }).catch((e) => {
        this.downloadError(e)
      })

downloadSuccess (response, minTime, maxTime, downloadCompletedMessage) {
    const filename = (response.jqXHR.getResponseHeader('Content-Disposition').split('"')[1])
    saveAs(response.payload, filename, 'application/zip')

This works fine for small files but fails if the file is more than 2Gb (The file is downloaded successfully but the saved file is of 1Kb only).

During my research, I saw that browser can download the file without FileSaver if the response has Content-Disposition which is true in my case. But I am not able to figure out how.

Do I need to use request differently?

Answer 1

From docs :

Content-Disposition attachment header is the best preferred way to download files from the browser. It has better cross browser compatibility, won't have any memory limit and it doesn't require any JavaScript.

You don't need ajax request to download the file. Only ensure that server add Content-Disposition header and provide a link to download.

If you can also use the anchor download attribute from HTML5.

Causes the browser to treat the linked URL as a download.

const link = document.createElement('a');
link.href = '/xyz/abc.pdf';
link.download = "file.pdf";
link.dispatchEvent(new MouseEvent('click'));

<a href="/xyz/abc.pdf" download="file.pdf"></a>