Content-Disposition:attachment not triggering download dialog

Question

I've encountered some unexpected behavior when trying to create a file download functionality on my NodeJS server. I have a REST (express) API that calls for some export data function, which creates a CSV file on the server and uses res.download('path/to/file') to trigger the download. Response headers include

Content-Disposition:attachment; filename="indicators.csv"
Content-Length:30125
Content-Type:text/csv; charset=UTF-8

so everything seems to be in order.

The thing is, I get the response from the server as plain text. The response has all the data the CSV file contains, but does not trigger the browser's file download dialog like I intended. I tried both on Chrome and FF. The problem persists in both.

Any ideas?

Update

I managed to make it work by creating a dummy form, and using its submit action to make my AJAX call. But it's an ugly hack, and I'm still looking for a more elegant solution.

score 34 · Accepted Answer · edited May 23 '17 at 11:53

34

Headers are not the issue. The issue is that you are querying the download url via an ajax call, which will not invoke the browser download dialog. Your options boil down to the following:

Use a form that is submitted to your download url. Instead of having a visible form a user has to interact with, create a form with JavaScript and submit it programmatically by calling form.submit - Handle file download from ajax post
Point window.location to the download url. You can do this in the current window - download file using an ajax request , or in a new one - res.download() not working in my case

edited May 23 '17 at 11:53

Community

1
1

answered Aug 31 '15 at 19:54

Roman Pletnev

5,958
2
21
28

As you can see in my question, option 1 is what I ended up using. But I must admit that option 2 might be a more elegant solution in my case. – Yaron Schwimmer Sep 01 '15 at 05:19
how do these do on Safari? I've found both are treated as pop-ups and effectively hidden from the user on safari – Jordan Mackie Mar 21 '22 at 12:39

MQ87 · Answer 2 · 2015-08-31T12:51:49.923

1

You can try to use a different content-type, so that won't be open as a text file on the browser:

Content-Type:application/ms-excel; charset=UTF-8

Another alternative could be to use application/octet-stream as mime-type to define it as a downloadable file without a better description.

Content-Type:application/octet-stream; charset=UTF-8

edited Aug 31 '15 at 12:51

answered Aug 31 '15 at 12:42

MQ87

1,008
1
13
30

score 0 · Answer 3 · edited May 23 '17 at 12:09

0

The question looks similar to this one

Show 'Save as' dialog box while downloading file from an Iframe through PHP

The basic idea is the second option that Roman described above, but this one's using an iframe to achieve it.

edited May 23 '17 at 12:09

Community

1
1

answered Sep 04 '15 at 21:57

Pawel Zieminski

439
3
8

score 0 · Answer 4 · answered Jan 17 '23 at 06:30

Inspired by Roman Pletnev, I recommend to wrap up the API response into a made up new document as follows (Vue/csv response):

    API.get(apiName, path, myInit)
        .then((response) => {
            // console.log(response)
            // Wrap this response into a temporary page that will trigger the download
            const blob = new Blob([response.data], { type: 'text/csv' })
            const blobURL = window.URL.createObjectURL(blob)
            const tempLink = document.createElement('a')
            tempLink.style.display = 'none'
            tempLink.href = blobURL
            tempLink.download = 'filename.csv'
            tempLink.setAttribute('target', '_blank')
            document.body.appendChild(tempLink)
            tempLink.click()
            document.body.removeChild(tempLink)
            window.URL.revokeObjectURL(blobURL)
        })
        .catch((error) => {
            console.log(error)
            console.log(error.response);
        });

Content-Disposition:attachment not triggering download dialog

4 Answers4

Linked