Javascript rename file on download
Solution 1
As InviS suggests, now there's a download
attribute on links.
Example:
<a href="http://server/site/test.txt" download="test001.txt">Download Your File</a>
- spec
- article
- browser support (Chrome, FF, Opera, Android Browser >= 4.4.4 at the time of writing)
Solution 2
You can used the download attribute on a link tag <a href="http://server/site/test.txt" download="test001.txt">Download Your File</a>
However, when content-disposition header is set on the server response, it will ignore the download attribute and the filename will be set to the filename in the content-disposition response header
You can accomplish this using axios, or any other fetch by doing this:
const downloadAs = (url, name) => {
Axios.get(url, {
headers: {
"Content-Type": "application/octet-stream"
},
responseType: "blob"
})
.then(response => {
const a = document.createElement("a");
const url = window.URL.createObjectURL(response.data);
a.href = url;
a.download = name;
a.click();
})
.catch(err => {
console.log("error", err);
});
};
usage:
downloadAs('filedownloadlink', 'newfilename');
Note: if your file is large, it will look like it is not doing anything until the whole file has been downloaded, so make sure you show some message or some indication to the user to let them know it is doing something
Solution 3
Use download
attribute of the link. But it works only in Chrome browser :)
Solution 4
This effect is accomplished by sending an additional header. You can use PHP, for example, to achieve this:
URLs can be rewritten using .htaccess
, (internally) redirecting the request to a PHP file. I will show a simple hard-coded example, of how the header can be set:
<?php
header('Content-type: text/plain');
header('Content-Disposition: attachment; filename="test001.txt"');
readfile('files/test.txt');
//assuming that the files are stored in a directory, not in a database
?>
bruno2007
Updated on May 18, 2020Comments
-
bruno2007 about 4 years
I want to be able to download a web file, but when the download dialog open, the filename is renamed.
Ex: File:
http://<server>/<site>/test.txt
and when I click to download the file, download dialog open with the file name:
test001.txt
.How can I achive that?
-
Truesky over 12 yearsbut this does not acomplish the dynamic nature he is looking for. My guess of course
-
Rob W over 12 yearsI showed how the headers can be set. If he has the skills to program in PHP, he can alter the code to accomplish his goal.
-
bruno2007 over 12 yearsI have the files in a Sharepoint library and I'm trying to create a custom action to download the files and add the document version in the file name. To do this custom action I can only use javascript code. Any tips?
-
Darren almost 9 yearsI use this in combination with target="_blank" for other browsers.
-
Dani almost 7 yearsAny way to append the current user's date to the filename? I only found how to change the
<a>
content (like "click her to download"), but not the value insidedownload="value"
-
Dmitry Pashkevich almost 7 years@DaniSpringer you can try dynamically setting the attribute via the
onclick
handler, but there may be limitations -
Dani almost 7 years@DmitryPashkevich thanks for your response. I asked today and got a pretty good answer. You can find the question via my account. I'm sure you know your way around SO. ;) if you think it is well asked, please up vote.