代码之家 › 专栏 › 技术社区 › Thilo

仅使用javascript将文本区域内容作为文件下载(无服务器端)

content-disposition download html javascript

Thilo · 技术社区 · 15 年前

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

现在,我只是将文本区域的内容发布到服务器,服务器会用 Content-disposition: attachment 被打了一巴掌。只有客户端javascript可以做到这一点吗?

7 回复 | 直到 13 年前

Smart Manoj AlexP 5 年前

这可能是你想要的: 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>

olliej 15 年前

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

yacoob 14 年前

有一些javascript库通过小型嵌入式swf文件实现了这种功能。例如 this one 是的。

Cyrlop 11 年前

我在这里找到了一个简单的解决方案: 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>

希望能有所帮助。

superphonic 9 年前

完全可以使用HTML5的跨浏览器JavaScript实现 saveAs 功能: https://github.com/koffsyrup/FileSaver.js

如果您只想保存文本,那么上面的脚本可以在所有浏览器(包括ie的所有版本)中工作,不需要swf。

Andrey Shchekin 15 年前

它可以通过创建一个框架,在其中写入内容,然后调用 document.execCommand('saveas', ...) 在ie和mozilla的nsifilepicker中,但我相信这需要一些特殊的特权(比如作为浏览器本身的一部分)。

bbarker 5 年前

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

firem 15 年前

简而言之:这是不可能的。您必须将其发布到服务器,服务器的响应可以是“内容部署:附件”。