I need to save content of div using pure javascript. I just edited one fiddle but I can't make it works :(
<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>
Download
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.html";
a.href = "data:text/html," + document.getElementById("content");
}
Close, you need innerHTML & trigger the click too:
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.html";
a.href = "data:text/html," + document.getElementById("content").innerHTML; // Grab the HTML
a.click(); // Trigger a click on the element
}
;charset= after the text/html bitwindow.navigator.msSaveBlob. For Safari, you might need to have the user click on the element manuallyIn your jsfiddle Java Script is configured to onLoad, which is why download() is not being invoked. Change it to No-Wrap, then you will be able invoke download() on onClick of the button.
update download() as
function download(){
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.html";
a.href = "data:text/html," + document.getElementById("content").innerHTML;
a.click();
}I agree with RGraham. However, if you use jQuery you can do it like this.
<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>
</div>
<button class="download">Download</button>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$('.download').on('click', function(){
$('<a />').attr({
download: 'export.html',
href: "data:text/html," + $('#content').html()
})[0].click()
});
</script>
In jsfiddle, you can't run a javascript function inside of html events (like onClick) unless the javascript is contained in tags. (nevermind this)
Try this:
HTML
<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>
</div>
<button id="download">Download</button>
JS
var download_button = document.getElementById('download');
download_button.onclick = download;
function download(){
var content = document.getElementById('content')
console.log(content);
}
You can use a "SaveFilePicker" to save directly to the folder of your choice without triggering the more restrictive download mechanisms of the previous methods. You can save any type of items.
<div id="content">
<h1>Hello world</h1>
<i>Hi everybody</i>
</div>
<button onmousedown="saveAs()" class="saveAs">saveAs</button>
<script>
async function saveAs(){
fileHandler = await window.showSaveFilePicker();
const file = await fileHandler.createWritable();
await file.write(document.querySelector('#content').innerHTML);
await file.close();
}
</script>
You need use https protocol, not http to use showSaveFilePiker and showOpenFilePicker. However, it require user action, and can't run automatically, but you can simulate user action.
