Question

我被要求制作一个“下载”按钮，在文件的同一页面上下载textarea的内容，浏览器的“另存为...”对话框显示出来。复制/粘贴可以很好地完成工作，但这是一个“要求”。

现在，我只是将textarea的内容发布到服务器上，然后在Content-disposition: attachment打开的情况下回复它们。有没有办法用客户端Javascript来做到这一点？

Answer 1

这可能是您正在寻找的： http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

它使用浏览器的下载对话框，但仅支持FF和Chrome，现在可能还有更多浏览器？

修改

如评论所述，我将嵌入文章中的代码：

function saveTextAsFile() { var textToWrite = //Your text input; var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'}); var fileNameToSaveAs = //Your filename; var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; if (window.webkitURL != null) { // Chrome allows the link to be clicked // without actually adding it to the DOM. downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob); } else { // Firefox requires the link to be added to the DOM // before it can be clicked. downloadLink.href = window.URL.createObjectURL(textFileAsBlob); downloadLink.onclick = destroyClickedElement; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); } downloadLink.click(); }

Answer 2

你可以尝试window.location = "data:application/octet-stream,"+text但是这并没有提供一个可以建议名称的机制，而且IE对数据URI的最大长度有一个非常小的上限，这可能是个问题。< / p>

Answer 3

通过小型嵌入式SWF文件，有一些javascript库可以做这种事情。例如this one。

Answer 4

我在这里找到了一个简单的解决方案：http://www.codingforums.com/archive/index.php/t-181561.html

My text area:<br />
<textarea rows='10' cols='80' id='myTextArea' ></textarea>

<br /><br />

Download button: <br />
<input value='download' type='button'
onclick='doDL(document.getElementById("myTextArea").value)' />


<script type='text/javascript'>
function doDL(s){
    function dataUrl(data) {return "data:x-application/text," + escape(data);}
    window.open(dataUrl(s));
}
</script>

希望它会有所帮助。

Answer 5

绝对可以使用HTML5 saveAs函数的跨浏览器JavaScript实现：https://github.com/koffsyrup/FileSaver.js

如果您只想保存文本，则上述脚本适用于所有浏览器（包括所有版本的IE），不需要SWF。

Answer 6

可能可以通过创建一个框架，在那里写入内容然后调用来实现 IE中的document.execCommand('saveas', ...)和Mozilla中的nsIFilePicker，但我认为这需要一些特殊的权限（比如成为浏览器本身的一部分）。

Answer 7

基于@Cyrlop的答案和https://stackoverflow.com/a/41948732/3096687，这提供了一种指定文件名的方法：

            function doDownload(str) {
              function dataUrl(data) {
                return "data:x-application/xml;charset=utf-8," + escape(data);
              }
              var downloadLink = document.createElement("a");
              downloadLink.href = dataUrl(str);
              downloadLink.download = "foo.xml";

              document.body.appendChild(downloadLink);
              downloadLink.click();
              document.body.removeChild(downloadLink);
            }

如果您不介意在JavaScript中包含更多字节，@ Superphonic的解决方案可能会更好。

Answer 8

简短的回答：这是不可能的。您必须将其POST到服务器，服务器的响应可以是“Content-disposition：attachment”。

Answer 9

您可以使用data: URI 和为其指定文件名，同时仍然下载文本。试试这个：

document.getElementById("dload").onclick = function(){
  var l = document.createElement("a");
  l.href = "data:text/plain;charset=UTF-8," + document.getElementById("dload-txt").value;
  l.setAttribute("download", document.getElementById("dload-fn").value);
  l.click();
}

textarea {width: 200px; height: 75px;}
input {width: 200px;}

<!DOCTYPE html>
<html>
  <head>
    <title>Download File</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <textarea placeholder="Enter text to download" id="dload-txt"></textarea><br/>
    <input placeholder="Enter file name to download as" id="dload-fn"/><br/><br/>
    <button id="dload">Download</button>
  </body>
</html>

这适用于大多数浏览器。

它的作用是获取包含必需数据的<textarea>和<input>标签，创建一个具有href到data:text/plain;UTF-8,<textarea data>的链接，并设置下载属性名称由<input>标记设置。然后单击链接，该链接将下载文本。

这里唯一不兼容浏览器的东西是：

data: URI，用于将数据下载为可下载链接。 Click here for CanIUse browser compatability tables
click()函数以单击链接。 Click here for CanIUse browser compatability tables
download属性表示下载。 Click here for CanIUse browser compatability

所以基本上：

在IE中不起作用
在Opera Mini中不起作用
不适用于Firefox，Chrome，Safari，Opera和iOS Safari的早期版本

否则，这可在所有主流浏览器中使用，并且不需要任何Blob对象。

Blob Constructing CanIUse compatibility tables

Blob URL CanIUse compatibility tables

仅使用Javascript（无服务器端）将textarea内容下载为文件

9 个答案: