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

ldioqlga  于 2023-08-02  发布在  Java
关注(0)|答案(9)|浏览(68)

我被要求制作一个“下载”按钮,将文本区域的内容作为文件下载到同一页面上,并显示浏览器的“保存为...”对话框。复制/粘贴可以很好地完成这项工作,但这是一个“要求”。
现在,我只是将文本区域的内容发布到服务器,服务器用Content-disposition: attachment回应它们。有没有一种方法可以只使用客户端JavaScript来实现这一点?

ecbunoof

ecbunoof1#

这可能是你正在寻找的: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();
    }

个字符

vc6uscn9

vc6uscn92#

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

字符串
希望能有帮助。

vqlkdk9b

vqlkdk9b3#

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

bd1hkmkf

bd1hkmkf4#

有一些JavaScript库可以通过小的嵌入式SWF文件来完成这种事情。例如this one

chy5wohz

chy5wohz5#

完全可以使用HTML5 saveAs函数的跨浏览器JavaScript实现:https://github.com/koffsyrup/FileSaver.js
如果你想做的只是保存文本,那么上面的脚本在所有浏览器(包括所有版本的IE)中都可以工作,不需要SWF。

ltskdhd1

ltskdhd16#

您可以使用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>

这适用于大多数浏览器。
它所做的是从文本区域和输入中获取必要的数据,创建一个包含hrefdata:text/plain;UTF-8,<textarea data>的链接,并使用<input>元素设置的名称设置download属性。然后单击链接,将下载文本。
这里唯一不兼容所有浏览器的东西是:

  1. data:用于将数据存储为链接的URI。data: URIs on CanIUse
  2. click()函数单击链接。HTMLElement.click() on CanIUse
  3. download属性表示下载。download attribute on CanIUse
    所以基本上:
  • 在IE中不工作
  • 不适用于Opera Mini
  • 不适用于Firefox、Chrome、Safari、Opera和iOS Safari的早期版本

否则,这适用于所有主流浏览器,并且不需要任何Blob对象。
Blob construction on CanIUse
Blob URLs on CanIUse

xkrw2x1b

xkrw2x1b7#

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

t8e9dugd

t8e9dugd8#

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

klh5stk1

klh5stk19#

简短回答:不可能。您必须将其POST到服务器,服务器的响应可以是“Content-disposition:依恋”。

相关问题