Web development and Tech news Blog site. WEBISFREE.com

HOME > js

How to download a file with the desired filename in JavaScript

Last Modified : 05 Mar, 2023 / Created : 05 Mar, 2023
View Count
We want to implement the function of downloading documents or images from a web page. In this case, if we want to download them with a specific name that is different from the original file name, how can we do it?

# Download files with your desired filename

When implementing download functionality, it is common to create an a tag and execute its click method. By creating the a tag and adding the download attribute, the file will be downloaded with the specified file name.

If you want to create an example of JavaScript that performs a click function, you can write it as follows:

(Essentially, this is saying that this is how you can write a Javascript example that allows you to click and download a file with your chosen filename)
const linkEle = document.createElement('a');
linkEle.src = "File path for download";
linkEle.download = "Filename for download";


As shown above, you can add the download attribute and the desired file name as its value to enable simple implementation.

! Tips and information

The download attribute allows you to specify a filename when downloading files, and is also used when downloading PDFs or images, for example. This is because these files typically open in the browser instead of being downloaded. However, by using the download attribute, you can download these files directly from the web browser. This attribute can also be added to enable downloading instead of loading the file in the browser.

"It can also be used when downloading, not just loading the browser!"

We have briefly learned how to download desired files from a web page using JavaScript up to this point.
Perhaps you're looking for the following text as well?


    [JavaScript] Usage and Application of the 'in' Operator


    Adding text and elements to JavaScript cursor position and selection area