web-dev-qa-db-ja.com

クライアントブラウザのコンテンツからファイルを生成して保存するように指示する方法

クライアントメモリにローカルに保存されたデータをディスクに保存するオプションをユーザーに提供する必要がある状況があります。私が持っている現在の回避策は、このようなハンドラを持つことです

(define-handler (download-deck) ((deck :json))
  (setf (header-out :content-type) "application/json"
    (header-out :content-disposition) "attachment")
  deck)

それはまさにそれがどのように見えるかを行います。クライアントはデータを送信し、返されたファイルをローカルに保存します。

これはばかげているようです。

pleaseファイル保存ダイアログボックスを使用して、クライアントがローカルデータをディスクに保存するためのより良い、より簡単なクロスブラウザの方法があることを教えてください。

私がこのテーマについて読んだすべての答えは、「いいえ、javascriptでファイルを保存することはできません」または「はい、あなたができるかもしれないChrome API 3ページで」。

javascriptfilesavedownload
24
Inaimathi

この「FileSaver」ライブラリが役立つ場合があります 。適度にクロスブラウザーにしたい場合は、まだ実装されていない場所にW3C Blob APIを実装するために this も必要です。どちらも名前空間を尊重し、完全にフレームワークに依存しないため、命名の問題を心配する必要はありません。

それらが含まれたら、テキストファイルのみを保存している限り、次のことができるはずです。

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

new Blobの最初の引数は文字列のリストである必要があり、ファイル名を指定する必要があることに注意してください。同様に、ユーザーにはこのファイルがローカルでダウンロードされるのが見えますが、自分で名前を付けることはできません。ローカルファイル名の衝突を処理するブラウザを使用していることを願っています...

30
Dave

これは私のコードです：

<a id='tfa_src_data'>Export</a>

document.getElementById('tfa_src_data').onclick = function() {                  
                        var csv = JSON.stringify(localStorage['savedCoords']);
                        var csvData = 'data:application/csv;charset=utf-8,' 
                                       + encodeURIComponent(csv);
                        this.href = csvData;
                        this.target = '_blank';
                        this.download = 'filename.txt';
                    };

さまざまなデータ型を使用できます。

13
tomasb

正確に何をしようとしているかに応じて、HTML5ローカルストレージの概念が役立つ場合があります。

では、HTML5ストレージとは何ですか？簡単に言えば、WebページがクライアントのWebブラウザー内で名前付きのキーと値のペアをローカルに保存する方法です。 Cookieと同様に、このデータは、Webサイトから移動した後、ブラウザータブを閉じた後、ブラウザーを終了した後、または何を持っている場合でも保持されます。 Cookieとは異なり、このデータがリモートWebサーバーに送信されることはありません（手動で送信しない限り）。 http://diveintohtml5.info/storage.html

Filesystem APIもあります（これまでのところChrome AFAIK）でのみ実装されています） http://www.html5rocks.com/en/tutorials/file/filesystem/

2
KarlM