blackjack4494/blobba.html

## blobba.html
<!--
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>

## blobbacompaqt.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>

## blobsimple.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>

## conti.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>

## contiq.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>

## random notes
https://www.bitdegree.org/learn/javascript-download
	<!--
	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>