web-dev-qa-db-ja.com

Javascriptでダウンロードするための動的ファイル+リンクを作成する方法は？

通常、HTMLページには、サーバーからダウンロードできるドキュメント（PDFなど）へのリンクを含めることができます。

Javascript対応のWebページを想定して、ユーザーブラウザー内からテキストドキュメント（たとえば）を動的に作成し、サーバー（または最小限の）に往復せずにこのドキュメントをダウンロードするためのリンクを追加できますか？

言い換えると、ユーザーはボタンをクリックし、javascriptは乱数（たとえば）を生成し、構造体に入れます。次に、javascript（たとえば、JQuery）がページにリンクを追加して、構造からテキストファイルとして結果をダウンロードします。

この目的は、ユーザー側ですべての（または少なくともほとんどの）ワークロードを維持することです。

はい、そうであれば、これは実行可能ですか？

javascriptfiledynamicdownloadcreation
22
Jérôme Verstrynge

ページに data URI を追加することにより、ダウンロード可能なドキュメントをページ内に埋め込むことができます。文字列のデータ部分は、Javascriptを使用して動的に連結できます。 URLエンコード文字列としてフォーマットするか、base64エンコードとしてフォーマットするかを選択できます。 base64でエンコードされている場合、ブラウザはコンテンツをファイルとしてダウンロードします。エンコードを行うには、 script またはjQueryプラグインを追加する必要があります。静的データの例を次に示します。

jQuery('body').prepend(jQuery('<a/>').attr('href','data:text/octet-stream;base64,SGVsbG8gV29ybGQh').text('Click to download'))
13
Nate Barr

これが私が作成したソリューションです。シングルクリックでファイルを作成してダウンロードできます：

<html>
<body>
    <button onclick='download_file("my_file.txt", dynamic_text())'>Download</button>
    <script>
    function dynamic_text() {
        return "create your dynamic text here";
    }

    function download_file(name, contents, mime_type) {
        mime_type = mime_type || "text/plain";

        var blob = new Blob([contents], {type: mime_type});

        var dlink = document.createElement('a');
        dlink.download = name;
        dlink.href = window.URL.createObjectURL(blob);
        dlink.onclick = function(e) {
            // revokeObjectURL needs a delay to work properly
            var that = this;
            setTimeout(function() {
                window.URL.revokeObjectURL(that.href);
            }, 1500);
        };

        dlink.click();
        dlink.remove();
    }
    </script>
</body>
</html>

このHTML5デモ のコードを調整して作成しましたが、機能するまで物事をいじくり回していたので、問題があると確信しています（改善があればコメントか編集してください！） ワーキング、シングルクリックソリューション。

（少なくとも、Chrome）の最新バージョンで動作します）

21
ahuff44