HTML5 JavaScript下载属性

Question

我已经在一个项目上工作了几个月，我即将结束。 最后一步是提供一个文件，该文件将填充由用户在其会话期间的动作生成的信息。 我可以用HTML5 / JS编写文件吗？ ecmanaut的答案让我非常接近，因为他提供了两种方法，一种是纯html5，一种是使用JavaScript。

我首先使用的JavaScript方法只适用于Chrome，而不适用于Mozilla或IE。 所以我使用纯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>';

此代码创建一个已下载的文件，但不包含文章所说的换行符。 所以我搜索了一下可以识别的其他字符代码。 http://en.wikipedia.org/wiki/Newline为我提供了许多可能的选择，没有我曾尝试过的。 我尝试过的是：'＆＃10'，''，'＆＃13'，''，'\\ r \\ n'，'\\ r'，'\\ n'，'\\ cr'，'\\ c \\ r'，0x0D，0x0A，0c0D0A。 在许多情况下，新线被删除，没有任何东西出现。

在测试上面的代码时，它适用于Mozilla和Chrome（减去换行符），但IE中的结果却不同。 当您单击“保存”链接时，它实际上会移动到页面并且具有与数据内容相同的URL。

虽然没有这个功能可以接受该项目，但我非常希望在花费了大量时间和精力并且已经如此接近之后才能使其工作。 我还需要在Safari中对此进行测试，但我还没有在该浏览器中进行任何测试。 从最重要到最不重要的浏览器支持如下：Mozilla，Chrome，Safari，IE。 如果可能的话，我想避免浏览器特定的编码。

我还应该提到，就像在第一个链接中，我不想发送到服务器进行下载，我需要它在客户端本地工作，没有服务器交互。

总而言之，我至少需要让换行符适用于该文件，以便Mozilla和Chrome都能正常运行。 如果可能的话，还有一种方法可以让文件在IE中运行。

编辑次数：2014年11月3日下午1:40当地时间我已经尝试过maths4js建议编辑关于更改我的报价并且建议不起作用。 我注意到提交更大的代码示例页面将是一个有用的想法。 还有人建议我看看哪些浏览器支持这个功能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>

我想感谢你们所付出的努力和时间。

Answer 1

尝试使用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>

应该工作，因为base64正确编码/维护新行字符。

Answer 2

这对我有用，如果与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);

在我的语音识别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