javascript file download example – How to download File Using JavaScript/jQuery?

javascript file download example – simple you can create a file and generate a download with Javascript in the Browser (without a server).

In this article, you will learn how to download a file in Javascript.

javascript file download example

javascript download file : here main 3 Examples for javascript write to file and download. simple you can Create an anchor tag link on the normal HTML page.

Let’s say you want to download Pakainfo.com’s logo – javascript file download example.

Download a File Using JavaScript

Use download Attribute in HTML to Download Files

<!DOCTYPE html> 
<html> 
<head>
	<title>How to Download files Using JavaScript -www.pakainfo.com</title>
</head>
   <body>     
         <a href="pakainfo.png" download="pakainfo">
         <button type="button">Download</button> 
         </a> 
   </body> 
</html> 

How to download File Using JavaScript/jQuery ?

index.html

<!DOCTYPE html>
<html>

<head>
	<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
	</script>
</head>

<body>
	<h2>
		Download File Using JavaScript/jQuery - www.pakainfo.com
	</h2>
	
	<h3>
		For Downloading, Click on the below link. - download file javascript</h3>
	
	<a id="downloaddoc" href="free-laravel-doc.html">
		Free Downlaod - Laravel DOC
	</a>
	
	<script>
		$(document).ready(function () {
			$("#downloaddoc").click(function (e) {
				e.preventDefault();
				
				window.location.href
					= "File/laraveldocuments.docx";
			});
		});
	</script>
</body>

</html>

don’t Miss: javascript download file automatically

Read Also:  jQuery - Hide and Show HTML Elements Example?

javascript download file

browser.downloads.download({url: "https://domain-name.org/pakainfo_logo.png"})

How to create a file and generate a download with Javascript in the Browser (without a server)

JavaScript Code

function download(filename, text) {
  var downloadfile = document.createElement('a');
  downloadfile.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  downloadfile.setAttribute('download', filename);

  downloadfile.style.display = 'none';
  document.body.appendChild(downloadfile);

  downloadfile.click();

  document.body.removeChild(downloadfile);
}

// Here you can Start file download.
download("welcome.txt","This is the content of my file :)");

HTML Code

<textarea id="text-val" rows="4">This is the content of my file</textarea><br/>
<input type="button" id="dwn-btn" value="Download dinamically generated text file"/>

how to download file in python

Example

import urllib.request

print('Beginning file download with urllib2...')

url = 'https://www.pakainfo.com/pakainfo_logo.jpg'
urllib.request.urlretrieve(url, '/Users/pakainfo/Downloads/pakainfo_log.jpg')

javascript download file

$('a#downlongbtn').attr({target: '_blank', 
                    href  : 'https://domain-name/docs/tamilrokers.pdf'});

how to set a var in js to be a download

var textToSave = 'Welcome To Pakainfo.com';

var hElmDataStore = document.createElement('a');

hElmDataStore.href = 'data:attachment/text,' + encodeURI(textToSave);
hElmDataStore.target = '_blank';
hElmDataStore.download = 'welcome_bonus.txt';
hElmDataStore.click();

Download File in AJAX Response (Success) using jQuery

Create a DOMString that contains the URL representing the Blob object. The DownloadFile() function is used to trigger a file download from JavaScript.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <input type="button" value="Download PDF File" onclick="DownloadFile('welcome-bonus.pdf')" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        function DownloadFile(fileName) {
            var url = "Files/" + fileName;
 
            $.ajax({
                url: url,
                cache: false,
                xhr: function () {
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 2) {
                            if (xhr.status == 200) {
                                xhr.responseType = "blob";
                            } else {
                                xhr.responseType = "text";
                            }
                        }
                    };
                    return xhr;
                },
                success: function (data) {

                    var blob = new Blob([data], { type: "application/octetstream" });
 

                    var isIE = false || !!document.documentMode;
                    if (isIE) {
                        window.navigator.msSaveBlob(blob, fileName);
                    } else {
                        var url = window.URL || window.webkitURL;
                        link = url.createObjectURL(blob);
                        var a = $("<a />");
                        a.attr("download", fileName);
                        a.attr("href", link);
                        $("body").append(a);
                        a[0].click();
                        $("body").remove(a);
                    }
                }
            });
        };
    </script>
</body>
</html>

I hope you get an idea about javascript file download example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.