Sometimes we need to create html/text file using content from text box and download
that file using JavaScript. This post explains one of the best solutions on that
using HTML5.
Following code will not used for IE as we are using download attribute of
anchor tag which is not supported in IE browsers. This code will be useful
to work on Google Chrome, Mozilla Firefox, Safari.
Here is the code with line by line full description of each line of code.
<![CDATA[
<!--DOCTYPE html-->
<html>
<head>
<title>JavaScript Code to Dynamically Create HTML/Text File and Download it
</title>
<style type="text/css">
.dvWrapper
{
margin: 0 auto;
padding: 0px;
display: table;
font-size: 18px;
font-family: Calibri;
}
#btnDownload
{
padding: 5px 20px;
font-size: 15px;
}
.dvWrapper div
{
margin: 10px 5px;
}
.dvWrapper input[type="text"]
{
width: 250px;
height: 20px;
font-size: 15px;
}
.dvWrapper select
{
width: 100px;
height: 25px;
font-size: 15px;
margin-left: 10px;
}
#txtFileContent
{
font-size: 15px;
}
</style>
<script type="text/javascript">
function clickDownload() {
// get html/plain text from textarea
var data = document.getElementById('txtFileContent').value;
// get file name from textbox
var fileName = document.getElementById('txtFileName').value;
// get type of file
var fileType = document.getElementById('selectFileType').value;
// validations
if (typeof fileName == 'undefined' || fileName == '') {
alert('Please enter valid file Name .');
return;
}
if (typeof data == 'undefined' || data == '') {
alert('Please enter valid content.');
return;
}
// content type for file
var contentType = 'data:application/octet-stream,';
// filename with extension like filename.html or filename.txt
fileName = fileName + "." + fileType;
downloadFile(contentType, data, fileName);
}
function downloadFile(contentType, data, filename) {
try {
// create anchor element so that we can use
// HTML5's "download" attribute of anchor tag
// (it will usefull to easily download any type of file)
var aDownlaodLink = document.createElement('a');
// make url to set to href of anchor tag
uriContent = contentType + encodeURIComponent(data);
// set attribute href to anchor element
aDownlaodLink.setAttribute('href', uriContent);
// set HTML5 attribute download to anchor element
aDownlaodLink.setAttribute('download', filename);
// append created element to body tag
document.body.appendChild(aDownlaodLink);
// check browser support for anchor click event
if (aDownlaodLink.click) {
// click to download html/text page
aDownlaodLink.click(aDownlaodLink.href);
}
else {
// aDownlaodLink.click not supported on safari
// so view file content on browser
window.open("data:text/json;charset=utf-8,"
+ encodeURIComponent(data));
}
// remove anchor element which is created earlier
document.body.removeChild(aDownlaodLink);
}
catch (ex) {
alert("Downloading Error : " + ex);
}
}
</script>
</head>
<body>
<div class="dvWrapper">
<div>
File Name :
<input type="text" id="txtFileName" /></div>
<div>
File Type :
<select id="selectFileType">
<option value="txt" selected="selected">plain/text</option>
<option value="html">html</option>
</select>
</div>
<div>
Content To Write into HTML/Text file :</div>
<textarea id="txtFileContent" rows="10" cols="70"></textarea>
<br />
<input type="button" id="btnDownload" value="Download"
onclick="return clickDownload();" />
</div>
</body>
</html>
]]>
Conclusion :
I hope that this article would have helped you in understanding Dynamically Create
and Download HTML or Text File using JavaScript. Your feedback and constructive
contributions are always welcome.
No comments:
Post a Comment