By skyforbes 
You might have seen scenarios where a file automatically gets downloaded as soon as you visit a specific page.
Let’s see on how to trigger an automatic file download when a user navigates to a new page using JavaScript.
Setting Up the Current Page
First, let’s set up our current page with a link to the new page. We will use JavaScript to handle the link click and redirect to the new page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Current Page</title>
</head>
<body>
<h1>Welcome to the Current Page</h1>
<a href="download.html" id="download-link">Go to Download Page</a>
<script>
// JavaScript to handle the anchor click and redirection
document
.getElementById("download-link")
.addEventListener("click", function (event) {
event.preventDefault(); // Prevent the default anchor behavior
window.location.href = "download.html"; // Redirect to the new page
});
</script>
</body>
</html>
Setting Up the New Page
Next, let’s set up our new page. This page will automatically trigger a download of the specified file when the page loads. It also provides a manual download link in case the automatic download doesn’t work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Download Page</title>
</head>
<body>
<h1>Welcome to the Download Page</h1>
<p>
Your download should start automatically. If not,
<a id="manual-download" href="#">click here</a> to start the download.
</p>
<script>
// Function to trigger the download
function triggerDownload(url) {
// Create an invisible anchor element
const a = document.createElement("a");
a.href = url;
a.download = ""; // Optional: You can set a default filename here
a.style.display = "none";
// Append the anchor to the body
document.body.appendChild(a);
// Programmatically click the anchor to trigger the download
a.click();
// Remove the anchor from the document
document.body.removeChild(a);
}
// Automatically trigger the download on page load
document.addEventListener("DOMContentLoaded", function () {
triggerDownload("<https://example.com/path/to/your/file.zip>"); // Replace with your file URL
});
// Handle manual download link click
document
.getElementById("manual-download")
.addEventListener("click", function (event) {
event.preventDefault();
triggerDownload("<https://example.com/path/to/your/file.zip>"); // Replace with your file URL
});
</script>
</body>
</html>
The above code uses the function, triggerDownload, which creates an invisible hyperlink (<a>) element, sets its href attribute to the URL of the file to be downloaded, and triggers a click event on it to start the download.
This function is called automatically when the page finishes loading, thanks to the DOMContentLoaded event listener.
There’s also a manual download link that users can click if the automatic download doesn’t start. When this link is clicked, the default action is prevented and the triggerDownload function is called, initiating the download.
Originally published at https://tahajiru.com.
In Plain English 🚀
Thank you for being a part of the In Plain English community! Before you go:
- Be sure to clap and follow the writer ️👏️️
- Follow us: X | LinkedIn | YouTube | Discord | Newsletter | Podcast
- Create a free AI-powered blog on Differ.
- More content at PlainEnglish.io
- Have a story to share? Join our global community of writers today!
Learn more Auto File Download on Page Navigation in JavaScript