14

ブラウザ (少なくとも Chrome) にdata:text/plainURL をダウンロードさせることができるかどうか疑問に思っていました。

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

これまでに運がなかった私がすでに試したことは次のとおりです。

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

しかし、このようなヘッダーを追加できないようです。

data:text/plain,...ChromeにURLをダウンロードさせる方法はありますか?

4

5 に答える 5

17

現在、<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プレフィックスを使用しますが、どちらも回避できます。

于 2012-07-27T10:36:07.663 に答える
13

これを試して：

<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

ブラウザーのサポートは、 http://caniuse.com/downloadで確認できます。

(2013年現在、IEもSafariも非対応)

サポートしていないブラウザーのフォールバックを作成できると思います。JS を使用して の値をhref="..."サーバー スクリプトの URL に変更します (適切な HTTP ヘッダーを含むファイルの内容を返しますContent-disposition: attachment;filename=filename.txt)。

于 2013-11-29T09:25:16.580 に答える
1

私がしたことは、データをサーバーに送信することでした。サーバーは次の HTTP ヘッダーでデータを送り返します。

Content-disposition: attachment;filename=test.txt

私はこれが好きではありませんが、かなりうまく機能します。

于 2011-06-25T14:01:57.093 に答える