My Pdf file is stored in google bucket, and i have a link let say .pdf. To download this file i am doing this,

<a href=".pdf" download> Download This File </a>

But when i click on this anchor tag, instead of downloading this file browser open this file in same tab even i try to download the file via javascript and was using this code .

var link = document.createElement("a");
link.download = 'File.pdf';
link.href = '.pdf';
link.click();

But same happen again file open in same tab instead of downloading. I don't know what is the main problem ? Is this Google bucket is not letting file to download, or my chrome setting preventing files to download. It is not downloading in Chrome i guess Chrome do allow the downloading from CORS files.

My Pdf file is stored in google bucket, and i have a link let say https://storage.googleapis.com/bucketName/xyz.pdf. To download this file i am doing this,

<a href="https://storage.googleapis.com/bucketName/xyz.pdf" download> Download This File </a>

But when i click on this anchor tag, instead of downloading this file browser open this file in same tab even i try to download the file via javascript and was using this code .

var link = document.createElement("a");
link.download = 'File.pdf';
link.href = 'https://storage.googleapis.com/bucketName/xyz.pdf';
link.click();

But same happen again file open in same tab instead of downloading. I don't know what is the main problem ? Is this Google bucket is not letting file to download, or my chrome setting preventing files to download. It is not downloading in Chrome i guess Chrome do allow the downloading from CORS files.

• javascript
• html
• download
• anchor

• The download doesn't work with all browser. Maybe you need to add ˋwindow.locatioń´. – Llazar Commented Oct 3, 2018 at 6:22
• Download attribute won't work if the href link used is of different domain due to CORS refer – bubesh Commented Oct 3, 2018 at 6:25
• 2 Possible duplicate of HTML5 download attribute not working when downloading from another server, even when Access-Control-Allow-Origin is set to all (*) – MatrixTXT Commented Oct 3, 2018 at 6:33
• You can't force Chrome to download instead of opening the PDF with only clientside javascript. To force a download, it is necessary to add the 'Content-Disposition: attachment' to the HTTP header, and that can only be done in the server side. – Iguatemi CG Commented Oct 3, 2018 at 6:48
• @MatrixTai in that question Alexandar said it is working in chrome but in my scene it is not working in chrome also. – Amit Chauhan Commented Oct 3, 2018 at 8:04

3 Answers 3

As per JavaScript/jQuery to download file via POST with JSON data construct a blob and use that to return the file reference for the link.

This will inform the browser of your intent in a standards compliance manner.

example ...

$.get(/*...*/,function (result)
{
    var blob=new Blob([result]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.txt";
    link.click();

});

Solution

Content-Disposition attachment seems to work for me:

self.set_header("Content-Type", "application/json")
self.set_header("Content-Disposition", 'attachment; filename=learned_data.json')

Workaround

application/octet-stream

I had something similar happening to me with a JSON, for me on the server side I was setting the header to self.set_header("Content-Type", "application/json") however when i changed it to:

self.set_header("Content-Type", "application/octet-stream")

It automatically downloaded it.

Also know that in order for the file to still keep the .json suffix you will need to it on filename header:

self.set_header("Content-Disposition", 'filename=learned_data.json')

Try link.target = "_blank"; this will open file in new tab and link.download will force it download.

Please tell if this works.