Instead of downloading, files are opening in browser

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.

The download doesn't work with all browser. Maybe you need to add ˋwindow.locatioń´. — Llazar, Oct 03 '18 at 06:22
Download attribute won't work if the href link used is of different domain due to CORS [refer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes) — bubesh, Oct 03 '18 at 06:25
Possible duplicate of [HTML5 download attribute not working when downloading from another server, even when Access-Control-Allow-Origin is set to all (\*)](https://stackoverflow.com/questions/28318017/html5-download-attribute-not-working-when-downloading-from-another-server-even) — MT-FreeHK, Oct 03 '18 at 06: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, Oct 03 '18 at 06: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, Oct 03 '18 at 08:04
@AmitChauhan, at that time `cross-origin download` is allowed, but since chrome 65, due to security problem, it is also blocked. See https://developers.google.com/web/updates/2018/02/chrome-65-deprecations. — MT-FreeHK, Oct 03 '18 at 08:25
Yes, you have no choice, but download the data in backend. Thus can then let client side downloads the pdf from your same origin. — MT-FreeHK, Oct 06 '18 at 04:37
ok thank you very much i really appreciate you effort and time to solve my problem :) — Amit Chauhan, Oct 08 '18 at 05:44

score 6 · Answer 1 · answered Oct 03 '18 at 09:45

6

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

});

answered Oct 03 '18 at 09:45

War

8,539
4
46
98

1

Have you try it to download a pdf? It won't work for up-to-date browser. – MT-FreeHK Oct 05 '18 at 09:14
1

agree pdf also won't download – Amit Chauhan Oct 05 '18 at 10:49
some browsers have built in functionality you cannot override ... it's a feature of the browser, after opening the browser will offer up a "save" option though as it has to download it in order to display in the first place. – War Oct 06 '18 at 20:04

score 2 · Answer 2 · answered Sep 18 '19 at 13:47

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

score 0 · Answer 3 · answered Oct 03 '18 at 06:56

0

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

Please tell if this works.

answered Oct 03 '18 at 06:56

Amit chauhan

540
9
22

Sorry, but it does not work , But for workaround in pdfviewer we have a button to download pdf, but it is not downloading the pdf directly from clicking on button. – Amit Chauhan Oct 03 '18 at 08:04

Instead of downloading, files are opening in browser

3 Answers3

Solution

Workaround