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

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(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();
    }

Answer 2

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

Answer 3

通过小型嵌入式SWF文件,有一些javascript库可以做这种事情.例如这一个.

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

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

document.getElementById("download").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 }

<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="download">Download</button>

这适用于大多数浏览器。

它的作用是从文本区域和输入中获取必要的数据，创建一个包含hrefto的链接data:text/plain;UTF-8,<textarea data>，并使用元素download设置的名称设置属性<input>。然后单击链接，这将下载文本。

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

1. data:用于将数据存储为链接的 URI。 数据：CanIUse 上的 URI

2. click()单击链接的功能。CanIUse 上的 HTMLElement.click()

3. download属性来表示下载。CanIUse 上的下载属性

所以基本上：

• 不适用于 IE

• 不适用于 Opera Mini

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

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

CanIUse 上的 Blob 构建

CanIUse 上的 Blob URL

Answer 6

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