7

I have been working on a project for a couple months now and I am nearing the end of it. One of the last steps is to provide a file which will be filled with information which has been generated by actions of the user during their session. Can I write files with HTML5/JS? and the answer by ecmanaut has gotten me very close since he provided two methods of doing so, one in pure html5 and one using JavaScript.

I had first used the JavaScript method which would only work in Chrome, not in Mozilla or IE. So I used the pure html5 method combined with some alternate JavaScript to paste it to the page so it was click-able.

document.getElementById('download').innerHTML = '<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;and a bit more">Save</a>';

This code creates a file which is downloaded, but does not contain the newline which the article said was ' '. So I did a search to see what other character codes could be recognized. http://en.wikipedia.org/wiki/Newline provided me with many possible choices, none that I have tried have worked. The ones I have tried are: '&#10', ' ', '&#13', ' ', '\r\n', '\r', '\n', '\cr', '\c\r', 0x0D, 0x0A, 0c0D0A. In many of the cases the newline was removed and nothing would appear.

While testing the above code, it works in Mozilla and Chrome (minus the newline), but the result in IE is different. When you click on the Save link, it actually moves to the page and has the url as what the data contents are.

While the project might be acceptable without this feature working, I would very much like to get it working after having spent so much time and effort on it and having gotten so close. I also need to test this in Safari but I have not done any testing in that browser yet. Browser support required from most important to least is as follows: Mozilla, Chrome, Safari, IE. If possible I would like to avoid browser specific coding.

I should also mention that like in the first link, I do not want to send to a server to have the download, I need it working locally on the client side with no server interaction.

So to sum up, I need at least to get the newline working for the file so that Mozilla and Chrome are both fully working. And if possible, a way to get the file working in IE as well.

Edit: Nov 3, 2014 1:40pm Local Time I have tried the suggested edit by maths4js about changing around my quotes and the suggestion did not work. It came to my attention that submitting a larger sample page of code would be a helpful idea. It was also suggested that I look to see which browsers support this feature http://caniuse.com/#feat=download and it appears that IE and Safari do not, so I will not worry about them at the moment and maybe down the road have browser specific coding for them.

<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><style>body{margin: 0px;padding: 0px;}</style></head><body><center><br><div id='download'></div></center>
<script>
function download(){
//var newline= '&#10';  //no line breaks
//var newline= '&#10;'; //no line breaks
//var newline= "&#10;"; //no line breaks
//var newline= "&#10";          //no line breaks
//var newline= "\r\n";      //no line breaks
//var newline= "\r\n;";     //appends ; but no line breaks
//var newline = '\n';       //no line break 
//var newline = '/n';   //completely failed
var newline = 0x0D0A;
var tab = "       ";
var text = "Title of the document" + newline;
text += "Just a line of text : ";
text = text +"Random";
text = text + newline + "Trial" + tab + "Time" + tab + "Correct" + newline;
//document.getElementById('download').innerHTML = '<a id="save" download="This_File.txt" href="data:text/plain,'+text+'">Save</a>';
//document.getElementById('download').innerHTML = '<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;and a bit more">Save</a>';
document.getElementById('download').innerHTML = "<a id='save' download='earth.txt' href='data:text/plain,mostly harmless&#10;and a bit more'>Save</a>";
}
download();

</script>
</body>
</html>

I would like to thank you all for the effort and time you have given me already.

Community
  • 1
  • 1
Daniel Watt
  • 95
  • 1
  • 2
  • 10

2 Answers2

4

Try converting your text to base64 using window.btoa function:

var myText = btoa('mostly harmless\n\rand a bit more');
document.getElementById('download').innerHTML = '<a id="save" download="earth.txt" href="data:text/plain;base64,' + myText + '">Save</a>';
<div id="download"></div>

Should work, as base64 properly encodes / maintains the new line character.

Michal Leszczyk
  • 1,849
  • 15
  • 19
  • 1
    This solution was exactly what was needed for this application, thank you very much. – Daniel Watt Nov 03 '14 at 19:55
  • 1
    One thing to note though - be aware, that the output of base64 function may be actually about 33% bigger than the original string. I don't think it will have a huge impact on the performance as long as you won't be trying to create really big files (like, megabytes of text), but it's worth to remember, I think. – Michal Leszczyk Nov 03 '14 at 20:01
  • Thank you Michal, it is good to know that, but in this case it is not a concern. The file size that is expected should never pass 15 lines. – Daniel Watt Nov 03 '14 at 20:08
2

This works for me, I use "\r\n" for new lines if used with Windows System, otherwise \n is enough

var textToWrite = txt; //plain text with \r\n for new lines if used with Windows System, otherwise \n is enough
var fileNameToSaveAs = session_title.innerText + '.txt'; //TODO: filename should be first 10chars of noweirdchrs(title)...

var textFileAsBlob = new Blob([textToWrite], {type:'text/plain;charset=utf-8'});

<a id='downloadLink_id'></a>

downloadLink = document.getElementById('downloadLink_id');
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);

See it in action on my speech recognition chrome app - any of the export options to txt or srt files...

Ronen Rabinovici
  • 8,680
  • 5
  • 34
  • 46
  • I will have to try this solution later (and hoping it will work for all 4 browsers). Thank you for taking the time to post this. I am commenting it into my file so that I cant forget about it. – Daniel Watt Nov 03 '14 at 19:57