312

ファイルに書き込みたいデータがあり、ユーザーがファイルの保存先を選択できるようにファイル ダイアログを開きます。すべてのブラウザで動作するのは素晴らしいことですが、Chrome でも動作する必要があります。私はこれをすべてクライアント側で行いたいと思っています。

基本的に、この関数に何を入れるべきか知りたい:

saveFile: function(data)
{
}

関数がデータを取り込む場所で、ユーザーにファイルを保存する場所を選択させ、その場所にそのデータを使用してファイルを作成します。

HTML を使用しても問題ありません。

4

12 に答える 12

310

trueimageによって提案された追加(IE のサポート) を伴う、 Awesomeness01によるコードの非常に小さな改善(アンカー タグは必要ありません):

// Function to download data to a file
function download(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

Chrome、FireFox、IE10 で正常に動作することがテスト済みです。

Safari では、データが新しいタブで開かれ、このファイルを手動で保存する必要があります。

于 2015-06-14T17:09:08.520 に答える
147 

function download(text, name, type) {
  var a = document.getElementById("a");
  var file = new Blob([text], {type: type});
  a.href = URL.createObjectURL(file);
  a.download = name;
}
<a href="" id="a">click here to download your file</a>
<button onclick="download('file text', 'myfilename.txt', 'text/plain')">Create file</button>

次に、アンカー タグに download 属性を付けてファイルをダウンロードします。

データ URL を作成するよりもこれが好きな理由は、長い URL を作成する必要がなく、一時的な URL を生成するだけでよいからです。

于 2015-03-30T05:52:31.250 に答える
139

github のこのプロジェクトは有望に見えます:

https://github.com/eligrey/FileSaver.js

FileSaver.js は、W3C saveAs() FileSaver インターフェイスをネイティブでサポートしていないブラウザーに実装します。

こちらのデモもご覧ください。

http://eligrey.com/demos/FileSaver.js/

于 2012-11-15T20:05:49.697 に答える
42

ファイルを作成する前に保存場所を選択することはできません。ただし、少なくとも Chrome では、JavaScript だけを使用してファイルを生成することは可能です。これは、CSV ファイルを作成する私の古い例です。ユーザーはそれをダウンロードするように求められます。残念ながら、これは他のブラウザー、特に IE ではうまく機能しません。

<!DOCTYPE html>
<html>
<head>
    <title>JS CSV</title>
</head>
<body>
    <button id="b">export to CSV</button>
    <script type="text/javascript">
        function exportToCsv() {
            var myCsv = "Col1,Col2,Col3\nval1,val2,val3";

            window.open('data:text/csv;charset=utf-8,' + escape(myCsv));
        }

        var button = document.getElementById('b');
        button.addEventListener('click', exportToCsv);
    </script>
</body>
</html>
于 2012-11-15T20:08:19.197 に答える
14

Chrome などの最新のブラウザーでは、このチュートリアルのようにファイル API を使用できます。

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 5*1024*1024 /*5MB*/, saveFile, errorHandler);
于 2012-11-15T20:05:34.230 に答える
9

コンソールでこれを試してみましたが、うまくいきました。

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
window.open(URL.createObjectURL(oMyBlob));
于 2015-04-11T09:47:36.037 に答える
5

これを純粋にJavascriptで行うことはできません。ブラウザで実行されているJavascriptには、セキュリティ上の理由から、まだ十分な権限がありません（提案があります）。

代わりに、Downloadifyを使用することをお勧めします：

サーバーとの対話なしでテキストファイルの作成とダウンロードを可能にする小さなjavascript+Flashライブラリ。

ここで、コンテンツを提供し、保存/キャンセル/エラー処理機能をテストできる簡単なデモを見ることができます。

于 2012-11-15T20:02:56.913 に答える
1

Javascript には FileSystem API があります。この機能を Chrome でのみ動作させることに対処できる場合は、http ://www.html5rocks.com/en/tutorials/file/filesystem/ から始めることをお勧めします。

于 2014-12-20T06:22:07.167 に答える