How to export source content within div to text/html file

Question

Let's say I have <div id="main"> ... Some html ...</div> and I need to take the html code within this div, place it inside a file and force a download of it in TXT format.

How can that be done? Should I use PHP or JavaScript? I would prefer JavaScript.

Solution 1

You could use something like this:

Updated jsfiddle with download btn(jquery)

Initial jsfiddle with plain js and autoexecution

html

<div id="main">
    <span>Hey there</span>
</div>

html - Edit (Added a link to perform this action)

<a href="#" id="downloadLink">Download the inner html</a>

Js

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'text/plain';

    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
    link.click(); 
}

var fileName =  'tags.html'; // You can use the .txt extension if you want

JS - Edit

Since you said in the comments that you are using jQuery i'll call this function from a handler, instead of calling it directly.

$('#downloadLink').click(function(){
    downloadInnerHtml(fileName, 'main','text/html');
});

You can download as a text, just remove the third argument for function, and it will take the default which is "text/plain", and add the extension .txt to the filename instead of html.

Note I edited this answer since the person who asked commented that he was looking how to make it work with a handler, he made it work, but just in case. The original code is in the jsfiddle

Solution 2

Update for Zagen function. Original will not work in IE 10-11:

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    if (navigator.msSaveBlob) { // IE 10+ 
        navigator.msSaveBlob(new Blob([elHtml], { type: mimeType + ';charset=utf-8;' }), filename);
    } else {
        var link = document.createElement('a');
        mimeType = mimeType || 'text/plain';

        link.setAttribute('download', filename);
        link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
        link.click(); 
    }
}

Comments

[Admin]

Is it using jquery? It's not working on my page, I even removed the current jquery that was in my code, I'm trying <a onclick="downloadInnerHtml(this)" href="#">SAVE</a>

[Admin]

Thx a lot for the help, I finally managed to make it work properly, I wouldnt have achieved that if it weren't for you.

[Lu Roman]

You welcome, if the code is in plain javascript since you didn't put the jquery tag, if you are using it just asign a click handler to your link and call this function in the callback, just in case you want to do it that way, but i'm glad you solved, good luck =)

[Mehmet Ataş]

This did not work for FF without calling document.body.append(link) before link.click(). Also care to call document.body.removeChild(link) after you are done.