web-dev-qa-db-ja.com

Javascriptのみを使用してtextareaのコンテンツをファイルとしてダウンロードします（サーバー側は使用しません）

テキストエリアのコンテンツをファイルと同じページにダウンロードする「ダウンロード」ボタンを作成するように求められ、ブラウザの「名前を付けて保存...」ダイアログが表示されます。コピー/貼り付けは問題なく機能しますが、これは「要件」です。

現在、textareaのコンテンツをサーバーに投稿しているところです。サーバーは、Content-disposition: attachmentを叩いてエコーバックします。クライアント側のJavascriptだけでこれを行う方法はありますか？

javascripthtmldownloadcontent-disposition
25
Thilo

これはあなたが探しているものかもしれません： 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>
23
NatureShade

window.location = "data:application/octet-stream,"+textを試すこともできますが、名前を提案するメカニズムは提供されていません。また、IEは、データURIの最大長に非常に小さな上限があります。問題になる可能性があります。

9
olliej

小さな埋め込みSWFファイルを介してこの種のことを行うJavaScriptライブラリがいくつかありました。たとえば これ 。

7
yacoob

私はここで簡単な解決策を見つけました： 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>

それが役立つことを願っています。

5
Cyrlop

HTML5 saveAs関数のこのクロスブラウザJavaScript実装を使用して絶対に可能です： https://github.com/koffsyrup/FileSaver.js

テキストを保存するだけの場合、上記のスクリプトはすべてのブラウザ（IEのすべてのバージョンを含む）で機能し、SWFは必要ありません。

4
superphonic

それはかもしれないフレームを作成し、そこにコンテンツを書き込んでから、IEとMozillaのnsIFilePickerで何かをdocument.execCommand('saveas', ...)を呼び出すことで可能ですが、私は信じていますそれにはいくつかの特別な特権が必要になります（ブラウザ自体の一部であるなど）。

1
Andrey Shchekin

@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のソリューションの方が優れている可能性があります。

1
bbarker

簡単な答え：それは不可能です。 POSTサーバーに送信する必要があり、サーバーからの応答は「Content-disposition：attachment」にすることができます。

0
firem