29

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

现在，我只是将 textarea 的内容发布到服务器，服务器会用Content-disposition: attachment耳光回响它们。有没有办法只用客户端 Javascript 来做到这一点？

4

10 回答 10

31

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

它使用浏览器的下载对话框，但只支持 FF 和 Chrome，也许现在更多的浏览器？

   function saveTextAsFile(textToWrite, fileNameToSaveAs)
    {
    	var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'}); 
    	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();
    }
<textarea id=t>Hey</textarea><br>
<button onclick=saveTextAsFile(t.value,'download.txt')>Download</button>

于 2013-10-12T09:17:43.147 回答
10

我在这里找到了一个简单的解决方案：https ://codepen.io

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>

希望它会有所帮助。

于 2013-07-05T10:31:57.797 回答
9

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

于 2009-03-04T07:28:53.700 回答
7

有一些 javascript 库通过小型嵌入式 SWF 文件来做这种事情。比如这个。

于 2010-06-07T23:00:15.777 回答
4

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

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

于 2015-05-28T13:32:38.753 回答
2

您可以使用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>标签，创建一个具有hrefto的链接，data:text/plain;UTF-8,<textarea data>并使用标签设置的名称设置下载属性<input>。然后单击链接，它将下载文本。

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

  1. data:用于将数据下载为可下载链接的 URI。 单击此处查看 CanIUse 浏览器兼容性表

  2. click()点击链接的功能。单击此处查看 CanIUse 浏览器兼容性表

  3. download属性来表示下载。单击此处查看 CanIUse 浏览器兼容性

所以基本上：

  • 在 IE 中不起作用

  • 不适用于 Opera Mini

  • 不适用于早期版本的 Firefox、Chrome、Safari、Opera 和 iOS Safari

否则，这适用于所有主要浏览器，并且不需要任何Blob对象。

Blob 构建 CanIUse 兼容性表

Blob URL CanIUse 兼容性表

于 2020-12-10T20:08:32.017 回答
2

基于@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 的解决方案可能会更好。

于 2019-05-15T15:58:38.220 回答
1

可以通过创建一个框架，在那里写入内容，然后在 IE 中调用 以及document.execCommand('saveas', ...)在 Mozilla 中使用 nsIFilePicker 进行调用，但我相信这需要一些非凡的权限（比如成为浏览器本身的一部分）。

于 2009-03-04T07:38:42.460 回答
-1

不工作

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>

于 2021-12-25T09:48:28.723 回答
-2

简短的回答：这是不可能的。您必须将其发布到服务器，并且来自服务器的响应可以是“内容处置：附件”。

于 2009-03-04T07:16:53.340 回答