[nodejs] Client file download via req.download

Guess you can't do download via ajax. If I use a <form>, it works just
fine. Lesson learned!

You can, but there is more work. When the ajax response comes down you
get the data but the browser doesn't automatically try to display it
(which is what causes download boxes to pop up). Instead you can convert
it to a dataURL and then do something like:



window.location = myDataUrl;



Which will being up a download prompt; this method isn't without it's
own problems though too.



-Chad



From: nodejs@googlegroups.com On Behalf
Of Geoff Bell
Sent: Thursday, March 07, 2013 3:18 PM
To: nodejs@googlegroups.com
Subject: [nodejs] Re: Client file download via req.download



Guess you can't do download via ajax. If I use a <form>, it works just
fine. Lesson learned!

On Thursday, March 7, 2013 11:04:08 AM UTC-5, Geoff Bell wrote:

I'm trying to add a download button to our site. Clicking it initiates
this ajax request:

$.ajax

url: '/reports/get_file_from_json_service'

data: { docId:window.DOCUMENT_ID, file_type:'pdf' }

type: 'POST'

success: (data, stat, xhr) => console.log 'download', stat

error: (xhr, stat, err) => console.log 'download', stat, err





This hits some service that retrieves the current document from a
data-store. For testing in an offline environment, I've mocked an
Express route and ends up here:

exports.getPDF = (req, res) ->

date = new Date().getTime()

console.log "Downloading document #{req.body.docId} of type
#{req.body.file_type}"



res.download 'mock_routes/report.pdf', "report#{date}.pdf", (err) ->

if err

console.log "something went wrong downloading report-#{date}.pdf",
err

else

console.log 'success'

exec 'touch mock_routes/report.pdf'





This appears to be working. I get a success message from the server,
and from the client. I can see the PDF body using Chrome's Inspector.
However, the browser is not prompting me to save the PDF. The response
header looks like so:

1. Accept-Ranges:

bytes

2. Cache-Control:

public, max-age=0

3. Connection:

keep-alive

4. Content-Disposition:

attachment; filename="report1362670336342.pdf"

5. Content-Length:

30042

6. Content-Type:

application/pdf

7. Date:

Thu, 07 Mar 2013 15:32:16 GMT

8. ETag:

"30042-1362670171000"

9. Last-Modified:

Thu, 07 Mar 2013 15:29:31 GMT

10. Vary:

Accept-Encoding

11. X-Powered-By:

Express



My understanding is that the Content-Disposition tells the browser to
save the file, and suggest the filename "report{date}.pdf. This isn't
happening though. Nothing happens. Any ideas why the browser is not
prompting to Save As?



Thank you,

Geoff

The standard trick is to use a hidden IFRAME - that lets you download
without replacing your current page. My code looks like:

url = 'full-size/' + encodeURIComponent(album.title).replace(/'/g, '%27') +
'/' + encodeURIComponent(metadata.fileName).replace(/'/g, '%27');

if (/webOS\/\d+\.\d+|hpwOS\/\d+\.\d+\.\d+|Mobile\S* Safari\/\S+|Android
\d+\.\d+/.test(window.navigator.userAgent)) {

window.open(url, '_blank');

} else {

iframe = document.getElementById(hiddenIFrameID);

if (iframe === null) {

iframe = document.createElement('iframe');

iframe.id = hiddenIFrameID;

iframe.style.display = 'none';

document.body.appendChild(iframe);

}

iframe.src = url;

}

The if-statement handles several mobile browsers that don't work with the
hidden IFRAME trick. There, the code just opens the file in a new window.
If it's a picture, you can long-tap or some such to save it. I've never
tried to download a PDF, so iOS may still not play nice.

If you view a PDF in Mobile Safari on iOS 6, it gives you the option to open it in iBooks, or any other installed application that claims to support PDFs.