HTML5 JavaScript下载属性

Question

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? 我可以用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. ecmanaut的答案让我非常接近，因为他提供了两种方法，一种是纯html5，一种是使用JavaScript。

I had first used the JavaScript method which would only work in Chrome, not in Mozilla or IE. 我首先使用的JavaScript方法只适用于Chrome，而不适用于Mozilla或IE。 So I used the pure html5 method combined with some alternate JavaScript to paste it to the page so it was click-able. 所以我使用纯html5方法结合一些替代JavaScript将其粘贴到页面，以便它可以点击。

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. http://en.wikipedia.org/wiki/Newline为我提供了许多可能的选择，没有我曾尝试过的。 The ones I have tried are: '&#10', ' ', '&#13', ' ', '\\r\\n', '\\r', '\\n', '\\cr', '\\c\\r', 0x0D, 0x0A, 0c0D0A. 我尝试过的是：'＆＃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. 在测试上面的代码时，它适用于Mozilla和Chrome（减去换行符），但IE中的结果却不同。 When you click on the Save link, it actually moves to the page and has the url as what the data contents are. 当您单击“保存”链接时，它实际上会移动到页面并且具有与数据内容相同的URL。

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. 我还需要在Safari中对此进行测试，但我还没有在该浏览器中进行任何测试。 Browser support required from most important to least is as follows: Mozilla, Chrome, Safari, IE. 从最重要到最不重要的浏览器支持如下：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. 总而言之，我至少需要让换行符适用于该文件，以便Mozilla和Chrome都能正常运行。 And if possible, a way to get the file working in IE as well. 如果可能的话，还有一种方法可以让文件在IE中运行。

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. 编辑次数：2014年11月3日下午1:40当地时间我已经尝试过maths4js建议编辑关于更改我的报价并且建议不起作用。 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. 还有人建议我看看哪些浏览器支持这个功能http://caniuse.com/#feat=download ，而IE和Safari似乎没有，所以我现在不会担心它们road有针对它们的浏览器特定编码。

<!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. 我想感谢你们所付出的努力和时间。

Answer 1

Try converting your text to base64 using window.btoa function: 尝试使用window.btoa函数将文本转换为base64：

 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. 应该工作，因为base64正确编码/维护新行字符。

Answer 2

This works for me, I use "\\r\\n" for new lines if used with Windows System, otherwise \\n is enough 这对我有用，如果与Windows系统一起使用，我会使用“\\ r \\ n”表示新行，否则\\ n就足够了

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... 在我的语音识别Chrome应用程序中查看它 - 对txt或srt文件的任何导出选项...

HTML5 JavaScript下载属性

问题描述

2 个解决方案

解决方案1
4 已采纳 2014-11-03 19:50:34

解决方案2
2 2014-11-03 19:49:24

HTML5 JavaScript下载属性

问题描述

2 个解决方案

解决方案1 4 已采纳 2014-11-03 19:50:34

解决方案2 2 2014-11-03 19:49:24

解决方案1
4 已采纳 2014-11-03 19:50:34

解决方案2
2 2014-11-03 19:49:24