I'm using window.location to download my image. It isn't in HTML because I generate the image on the server and then send it back down so it looks like :

window.location = data.url;

I've seen a few other questions but they suggest the download attr which I don't have because there's no HTML.

Is there a way I can change the file name?

I'm using window.location to download my image. It isn't in HTML because I generate the image on the server and then send it back down so it looks like :

window.location = data.url;

I've seen a few other questions but they suggest the download attr which I don't have because there's no HTML.

Is there a way I can change the file name?

• javascript
• jquery

3 Answers 3

Front-end solution

The only thing you can do on the front-end side is to change your code to HTML <a> element with download attribute:

<a href="my_file.pdf" download="very_important_report.pdf">Download</a>

When user clicks this link, the browser forces download and saves the file with given filename. You can read more about it in this post. It's quite a new feature so check the browser support.

Back-end solution

If you can modify the server-side code then you should use content-disposition header as defined in RFC 2183.

content-disposition: attachment; filename=very_important_report.pdf

I've been wondering about it as well and saw this post but I was also using vuejs for the project and want the export to be continues even when switching from one page to another so I tried something and it did work here is another solution:

var link = document.createElement('a');
link.setAttribute('href', '<yourlink_or_data>');
link.setAttribute('download', 'filename.ext');
link.click();

You can't change the filename on the client side. You would have to do that on the server.

You could set the content-disposition header (on the server side) like this:

Content-Disposition: attachment; filename="yourname.gif"