CODEWITHSUNDEEP
htmlgoogle-chrome
Buffer Overflow
Buffer Overflow

Reputation: 1046

Chrome Download Attribute not working to replace the original name

I've experienced some unexpected behavior of Chrome since the newest version: While in Firefox this Code is working Perfectly fine:

<a 
  id="playlist"
  class="button"
  download="Name.xspf" 
  href="data:application/octet-stream;base64,PD94ANDSOON" 
  style="display: inline;">
    Download Me
</a>

It isn't working in Chrome (Simply downloading a file named "Download"), but has worked pretty fine before. What do I have to change that it is working again?

Upvotes: 100

Views: 191439

Answers (12)

Tunji Oyeniran
Tunji Oyeniran

Reputation: 4394

I recommend using the file-saver NPM Package to implement or force download.

  1. Install file-saver package
# install via npm
npm i file-saver

# or install via yarn
yarn add file-saver
  1. import saveAs function from file-saver
import { saveAs } from 'file-saver'
  1. use saveAs function
saveAs('https://httpbin.org/image', 'image.jpg')

References

Upvotes: 2

Augustin Riedinger
Augustin Riedinger

Reputation: 22148

Reading the comments, I had the same issue as @buffer-overflow and found this in the issue:

I'm guessing that the web page and the download are on different origins. We no longer honor the download attribute suggested filename for cross origin requests. Clicking on the link still initiates a download. But the the filename is only derived from factors solely dependent on the server (e.g. Content-Disposition header in the response and the URL).

So no chance I could make it work ... :(

Upvotes: 78

psygo
psygo

Reputation: 7543

In case anyone is having problems with this when the address of the file is different from this one, you could try to:

  1. Locally create a Blob from downloading locally the original file.
  2. Creating a URL object based on the local Blob.

It would look like this:

const outsideRes = await fetch(outsideUrl);

const blob = await outsideRes.blob();
const url = window.URL.createObjectURL(blob);

const link = document.createElement("a");
link.href = url;
link.download = "marketing-payout-report.csv";
link.click();

Upvotes: 3

Emanuel Vintilă
Emanuel Vintilă

Reputation: 1939

After some research I have finally found your problem.

<a>'s download attribute:

If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.

If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.

Source

HTTP-Header Content-Disposition

Upvotes: 76

Jonathan Alves
Jonathan Alves

Reputation: 11

The file has to be in some zipped format!

Upvotes: -5

KJ Sudarshan
KJ Sudarshan

Reputation: 3222

This is the current behaviour in Chrome as of 16 Aug, 2021

If you are calling an api like this: http://localhost:9000/api/v1/service/email/attachment/dummy.pdf

Chrome will try to parse the last value of the path param and ignore any value passed to attachment attribute of a link if Content-Disposition is not set or is set to inline from the server, in which case the pdf file will have the name dummy.pdf

If Content-Disposition is set to attachment, then chrome will save the file with the filename value from Content-Disposition header.

That is if the server were to respond like this:

res.setHeader(
  "Content-disposition",
  "attachment; filename=" + "server-dummy.pdf"
);
res.setHeader("Content-Type", "application/pdf");

The file would be saved as server-dummy.pdf regardless of the presence of download attribute.

Upvotes: 4

Sachith Harshamal
Sachith Harshamal

Reputation: 16

It won't work without a server. download attribute will do the work only when using a server (local/remote) like tomcat/xampp/wampserver...

<a href="videos/sample.mp4" download>Download Video</a>
<a href="images/sample.jpg" download>Download Image</a>

Not just only for videos or images.

Upvotes: 0

oware
oware

Reputation: 706

I had this problem with wordpress, the problem is that wordpress generates the full path of the file, and in the a tag you have to remove the full domain name and add a relative path

Example, instead of:

<a href="http://mywordpresssite.com/wp-content/uploads/file.mp4" download="file.mp4" >

You have to do this:

<a href="/wp-content/uploads/file.mp4" download="file.mp4">

This will make it work

Upvotes: 16

Sachin
Sachin

Reputation: 1425

Are you looking at the files via a web server or your local filesystem - Does the browser's URL bar start with http:// or file:///? I just ran some tests in Chrome, and while it will download the file, it doesn't respect the value of the download attribute when you're using the local file.

If you start hosting it on a web server, this will start working. If you're just doing this for yourself on your computer, check out WAMP for Windows or MAMP for macOS to get started with Apache.

Upvotes: 0

AKSHAYA KUMAR Satapathy
AKSHAYA KUMAR Satapathy

Reputation: 58

I have a simple solution regarding this issue. You just need to put your html file into a server like Apache using xampp control and so on. Because the download attribute is properly working through a server.

<a download href="data:application/octet-stream;base64,PD94ANDSOON">Download Me</a>

Upvotes: 2

venkata krishna sharma
venkata krishna sharma

Reputation: 101

This can be resolved by adding target="_blank" attribute to the href.

Like this:

Save sprites.svg as 
<a target="_blank" download="somefilename.svg"
href="https://cdn.sstatic.net/Img/unified/sprites.svg"
>somefilename.svg</a>

Upvotes: -2

ankit
ankit

Reputation: 15

Go To Chrome Click on “Settings” and you'll see a new page pop up in your Chrome browser window. Scroll down to Advanced Settings, find the Downloads group, and clear your Auto Open options. Next time you download an item, it will be saved instead of opened automatically.

Upvotes: -16

Related Questions