'data：text/plain' URLを強制ダウンロードする

Question

URL（data:text/plain）をダウンロードするにはブラウザ（少なくともChrome）を強制することが可能かどうか疑問に思っていました。

ChromeはバイナリURL（例：data:application/zip;base64,...）をダウンロードしますが、ブラウザ内で閲覧できるファイル（テキストファイルなど）はダウンロードしません。

data:text/plain;content-disposition=attachment;filename=test.txt;... 

しかし、私はこのようなヘッダを追加することはできませんように思える：私はすでに運を試してみました何

は、これまでのところ、このです。

クロムをダウンロードする方法はありますかdata:text/plain,...？

Answer 1

今のところ、<a download>をChromeで使用できるようになりました。 dispatchEventを使用すると、必要に応じて任意の文字列をファイルとして（カスタムファイル名でも）ダウンロードできます。ここではそれを使用するためのユーティリティ関数です：

var downloadFile = function(filename, content) { 
    var blob = new Blob([content]); 
    var evt = document.createEvent("HTMLEvents"); 
    evt.initEvent("click"); 
    $("<a>", { 
    download: filename, 
    href: webkitURL.createObjectURL(blob) 
    }).get(0).dispatchEvent(evt); 
}; 

は使用方法：

downloadFile("foo.txt", "bar"); 

それはjQueryとwebkit接頭辞を使用していますが、両方を回避することができます。

Answer 2

私は、次のHTTPヘッダーでそれらを送り返すサーバーにデータを送っていた何をしたか：

Content-disposition: attachment;filename=test.txt 

私はこれが好きではないが、それはかなりうまく動作します。

Answer 3

Try this: 
<a download="file_downloaded_via_data_URL.txt" 
href="data:text/plain;base64,SGVsbG8sIHdvcmxkISBJJ20gZG93bmxvYWRlZCB2aWEgImRhdGE6dGV4dC9wbGFpbjsuLi4iIFVSTCB1c2luZyA8YSBkb3dubG9hZD0iZmlsZV9uYW1lIi4uLj4uDQpNeSBiaXJ0aHBsYWNlOiBodHRwOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzY0Njg1MTcvDQoNCk1vcmUgYWJvdXQ6DQpodHRwOi8vd3d3LnczLm9yZy9UUi9odG1sL2xpbmtzLmh0bWwjYXR0ci1oeXBlcmxpbmstZG93bmxvYWQNCmh0dHA6Ly93d3cudzMub3JnL1RSL2h0bWwvbGlua3MuaHRtbCNkb3dubG9hZGluZy1yZXNvdXJjZXMNCg0KQnJvd3NlciBzdXBwb3J0OiBodHRwOi8vY2FuaXVzZS5jb20vZG93bmxvYWQ="> 
    Download text file 
</a> 

これはHTML5属性download="filename.ext"を使用します。 （何を必要としないJS :)

詳細について： http://www.w3.org/TR/html/links.html#downloading-resources

ブラウザのサポートは、私が考える

（2013年、今のところは、IEやSafariのサポートなし）http://caniuse.com/downloadで

を確認することができますサポートしていないブラウザでは、JSを使用してhref="..."の値をサーバースクリプトのURLに変更します（適切なHTTPヘッダーContent-disposition: attachment;filename=filename.txtでファイルの内容が返されます）。

Answer 4

これは地獄のように動作します...

<div class="tags-style-one dragme" draggable="true" data-transfer="33343">some value is 33343</div> 

    <script type="text/javascript"> 
    (function ($) { 
     $(document).ready(function() { 
     $('.dragme').on("dragstart",function(evt) { 
      evt.originalEvent 
        .dataTransfer 
        .setData(
          "text/plain", 
          $(this).data('transfer').toString() 
        ); 
     }); 
    })(jQuery); 
</script>