25

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

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

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

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

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

この件について私が読んだすべての回答は、「いいえ、javascriptでファイルを保存することはできません」または「はい、3ページで実行できるChrome APIの半文書化された部分が1つあります」と言います。

4

3 に答える 3

31

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

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

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

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

于 2013-09-09T02:45:50.480 に答える
12

これは私のコードです：

<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';
                    };

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

于 2014-08-25T15:06:48.493 に答える
2

正確に何をしようとしているかによって、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/

于 2013-09-09T01:52:22.307 に答える