文件不是下载，而是在浏览器中打开

Question

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.

Answer 1

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();

});

Answer 2

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

Please tell if this works.

Answer 3

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')