How to use Download attribute In Javascript

The download attribute simply uses an anchor tag to prepare the location of the file that needs to be downloaded. The name of the file can be set using the attribute value name, if not provided then the original filename will be used.

Syntax:

<a download="filename">

// filename attribute specifies the name of the file that will be downloaded.

Example: In this example, we will see the implementation of the above approach with an example.

html




<!DOCTYPE html>
<html>
 
<body>
    <style>
        p {
            color: green;
        }
    </style>
    <p>
        How to trigger a file download when
        clicking an HTML button or JavaScript?
    </p>
    <a href="w3wiki.png" download="GFG">
        <button type="button">Download</button>
    </a>
</body>
 
</html>


Output:

Output

How to trigger a file download when clicking an HTML button or JavaScript?

In today’s digital age, numerous applications offer the feature to upload and download files. For instance, plagiarism checker tools enable users to upload a document file containing text. The tool then checks for plagiarism and generates a report, which can be downloaded by the user.

To trigger a file download on a button click we will use a custom function or HTML 5 download attribute.

Table of Content

  • Using Download attribute
  • Using a custom javascript function
  • Using a custom javascript function with Axios Library

Similar Reads

Using Download attribute

The download attribute simply uses an anchor tag to prepare the location of the file that needs to be downloaded. The name of the file can be set using the attribute value name, if not provided then the original filename will be used....

Using a custom javascript function

...

Using a custom javascript function with Axios Library

First create a textarea to capture user input, where the text content is intended for the downloadable file Now :...