Menu
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 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: '
', ' ', '
', ' ', '\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= '
'; //no line breaks
//var newline= ' '; //no line breaks
//var newline= " "; //no line breaks
//var newline= "
"; //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 and a bit more">Save</a>';
document.getElementById('download').innerHTML = "<a id='save' download='earth.txt' href='data:text/plain,mostly harmless 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.
536
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.
197
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...
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
