Skip to content

Instantly share code, notes, and snippets.

@blackjack4494
Last active Jan 8, 2020
Embed
What would you like to do?
different ways to download files with pure js. only tested with chrome!
<!--
http://jsfiddle.net/koldev/cW7W5/
Will most likely work with big files.
Should be unlimited in Firefox. Chrome is a bit more complex basically you can use 10% of your max hard drive space.
BE CAREFUL! DOWNLOAD WILL INSTANTLY TRIGGER!!
-->
<!doctype html>
<html lang="de">
<body>
<script>
var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
};
}());
var data = { x: 42, s: "hello, world", d: new Date() },
fileName = "my-download.json";
saveData(data, fileName);
</script>
</body>
</html>
<!--
https://stackoverflow.com/a/52829183/1515686
Will most likely work with big files.
Should be unlimited in Firefox. Chrome is a bit more complex basically you can use 10% of your max hard drive space.
BE CAREFUL! DOWNLOAD WILL INSTANTLY TRIGGER!!
-->
<!doctype html>
<html lang="de">
<body>
<script>
const downloadFile = (blob, fileName) => {
const link = document.createElement('a');
// create a blobURI pointing to our Blob
link.href = URL.createObjectURL(blob);
link.download = fileName;
// some browser needs the anchor to be in the doc
document.body.append(link);
link.click();
link.remove();
// in case the Blob uses a lot of memory
window.addEventListener('focus', e=>URL.revokeObjectURL(link.href), {once:true});
};
downloadFile(new Blob(['random data']), "myfile.txt");
</script>
</body>
</html>
<!--
https://codepen.io/vidhill/pen/bNPEmX
Will most likely work with big files.
Should be unlimited in Firefox. Chrome is a bit more complex basically you can use 10% of your max hard drive space.
blob download with button click
-->
<!doctype html>
<html lang="de">
<body>
<a id="myButton" href="#">Download JSON</button>
<script>
// dummy json data to save
var data = { x: 42, s: "hello, world", d: new Date() }
document.getElementById('myButton').onclick = function(event){
var json = JSON.stringify(data),
blob = new Blob([json], {type: "octet/stream"}),
url = window.URL.createObjectURL(blob);
this.href = url;
this.target = '_blank';
// target filename
this.download = 'my-download.json';
}
</script>
</body>
</html>
<!--
https://jsfiddle.net/cowboy/hHZa9/
(also works with pure js)
I am unsure about big files with solution tho.
-->
<!doctype html>
<html lang="de">
<body>
<div id="json_container"></div>
<script>
var obj = {fruit: 'banana', number: 7};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
$('<a href="data:' + data + '" download="obj_data.json">Clock to download JSON</a>').appendTo('#json_container');
</script>
</body>
</html>
<!--
http://jsfiddle.net/sz76c083/1/
I am unsure about big files with solution tho.
-->
<!doctype html>
<html lang="de">
<body>
<div id="json_container"></div>
<script>
var obj = {a: 123, b: "4 5 6"};
var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
var a = document.createElement('a');
a.href = 'data:' + data;
a.download = 'data.json';
a.innerHTML = 'download JSON';
var container = document.getElementById('json_container');
container.appendChild(a);
</script>
</body>
</html>
https://www.bitdegree.org/learn/javascript-download
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment