CODEWITHSUNDEEP
javascripthtmlfilebuttonsave
nosmoke
nosmoke

Reputation: 59

HTML button to save div content using javascript

I need to save content of div using pure javascript. I just edited one fiddle but I can't make it works :(

jsfiddle

<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");
}

Upvotes: 4

Views: 26798

Answers (5)

D&#39;Artagnan
D&#39;Artagnan

Reputation: 21

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.

Upvotes: 0

Pranav Manmadhan
Pranav Manmadhan

Reputation: 31

In 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();

}

Upvotes: 3

Walker Boh
Walker Boh

Reputation: 770

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);
}

updated jsfiddle

Upvotes: 0

Faraj Farook
Faraj Farook

Reputation: 14855

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>

Upvotes: 2

CodingIntrigue
CodingIntrigue

Reputation: 78525

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
}

Working Fiddle

Upvotes: 4

Related Questions