Morioh
Login
Roosevelt Hettinger

Roosevelt Hettinger

1 year ago

How to Download a File Using JavaScript

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>

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.

#javascript 

How to Download a File Using JavaScript
1.15 GEEK