Make a “Download This as HTML” Link

Sometimes on a web page, you want to give the user the ability to download a particular snippet of code or text in a common format like HTML. For example, you could have a text field that allows the user to enter their own HTML:

<textarea id="txt" cols="60"></textarea>
Code language: HTML, XML (xml)

The user can enter any text they want into that <textarea> element, which can then be downloaded using the following link:

<a href="nothing.html" id="link" download="code.html">Download Content as HTML</a>
Code language: HTML, XML (xml)

Things to note about the HTML:

• The file name is whatever you specify in the download attribute
• If no value is provided in download, the browser will attempt to download the file referenced in the href attribute
• The href value “nothing.html” is just a placeholder; you can enter a default page of some sort, in case the JavaScript doesn’t run

When that link is clicked, the following JavaScript will execute:

function downloadCode(link, code) { 
  link.href = 'data:text/html;charset=utf-8,' + code; 
} 

document.getElementById('link').addEventListener('click', function () { 
  downloadCode(this, txt.value); 
}, false);
Code language: JavaScript (javascript)

Things to note about the JavaScript:

• The href of the link is replaced with a data URI, which builds the page on the fly
• The txt.value parameter that gets passed into the function is a reference to the <textarea> which has an ID of “txt”

The following CodePen is a working example of the above code: