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>

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>

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

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:

Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.
Back to Snippets
Scroll to Top