248

たとえば、リンクをたどると：

data:application/octet-stream;base64,SGVsbG8=

ブラウザーは、ハイパーリンク自体で base64 として保持されているデータで構成されるファイルをダウンロードするように求めます。マークアップでデフォルト名を提案する方法はありますか? そうでない場合、JavaScript ソリューションはありますか?

4

17 に答える 17

187

download次の属性を使用します。

<a download='FileName' href='your_url'>

このdownload属性は、 Chrome、Firefox、Edge、Opera、デスクトップ Safari 10 以降、iOS Safari 13 以降で機能しますが、IE11 では機能しません。

于 2011-08-04T14:44:32.040 に答える
42

RFC 2397によると、いいえ、ありません。

また、使用できる要素の属性もないようです。<a>

ただし、HTML5 ではその後要素にdownload属性が導入され<a>ましたが、執筆時点ではサポートは普遍的ではありません (たとえば、MSIE サポートはありません)。

于 2008-11-12T13:52:33.723 に答える
21

netwerk/protocol/data/nsDataHandler.cpp の Firefox ソースを少し調べました。

データ ハンドラーはコンテンツ/タイプと文字セットのみを解析し、文字列に ";base64" があるかどうかを調べます

rfc はファイル名を指定せず、少なくとも Firefox はそのファイル名を処理しないため、コードはランダムな名前と「.part」を生成します。

Firefoxのログも確認しました

[b2e140]: DOCSHELL 6e5ae00 InternalLoad data:application/octet-stream;base64,SGVsbG8=
[b2e140]: Found extension '' (filename is '', handling attachment: 0)
[b2e140]: HelperAppService::DoContent: mime 'application/octet-stream', extension ''
[b2e140]: Getting mimeinfo from type 'application/octet-stream' ext ''
[b2e140]: Extension lookup on '' found: 0x0
[b2e140]: Ext. lookup for '' found 0x0
[b2e140]: OS gave back 0x43609a0 - found: 0
[b2e140]: Searched extras (by type), rv 0x80004005
[b2e140]: MIME Info Summary: Type 'application/octet-stream', Primary Ext ''
[b2e140]: Type/Ext lookup found 0x43609a0

Mozilla のソースを調べたい場合は、興味深いファイルを以下に示します。

data uri handler: netwerk/protocol/data/nsDataHandler.cpp
where mozilla decides the filename: uriloader/exthandler/nsExternalHelperAppService.cpp
InternalLoad string in the log: docshell/base/nsDocShell.cpp

何もないと思うので、今のところ解決策を探すのをやめてもいいと思います:)

このスレッドで気づいたように、html5 にはdownload属性があり、firefox 20 でも動作します http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

于 2011-06-05T01:49:33.417 に答える
15

次の Javascript スニペットは、リンクの新しい「ダウンロード」属性を使用してクリックをシミュレートすることにより、Chrome で機能します。

function downloadWithName(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  link.click();
}

次の例は、その使用法を示しています。

downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")
于 2013-04-05T11:19:07.527 に答える
13

いいえ。

全体的な目的は、ファイルではなくデータストリームであることです。データソースは、それをファイルとして処理するユーザーエージェントの知識を持ってはなりません...そしてそうではありません。

于 2011-05-30T00:03:08.527 に答える
10

アンカー要素にダウンロード属性を追加できます。

サンプル：

<a download="abcd.cer"
    href="data:application/stream;base64,MIIDhTC......">down</a>
于 2012-09-13T14:57:11.830 に答える
8

Service workerを使用すると、これが最終的に真の意味で可能になります。

  1. 偽の URL を作成します。例: /saveAs/myPrettyName.jpg
  2. URL in <a href, <img src、window.open( url ) を使用してください。「実際の」URL で実行できることは絶対に何でもしてください。
  3. ワーカー内で fetch イベントをキャッチし、正しいデータで応答します。

ユーザーが新しいタブでファイルを開いてそこに保存しようとしても、ブラウザーは myPrettyName.jpg を提案するようになりました。ファイルがサーバーから送信されたかのようになります。

// In the service worker
self.addEventListener( 'fetch', function(e)
{
    if( e.request.url.startsWith( '/blobUri/' ) )
    {
        // Logic to select correct dataUri, and return it as a Response
        e.respondWith( dataURLAsRequest );
    }
});
于 2015-01-24T10:56:59.247 に答える
5

このリンクを見てください: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

見積もり：

このように最後に ;base64 を使用しても機能します（問題は発生しません）
（少なくともOperaでは）：

data:text/plain;charset=utf-8;headers=Content-Disposition%3A%20attachment%3B%20filename%3D%22with%20spaces.txt%22%0D%0AContent-Language%3A%20en;base64,4oiaDQo% 3D

また、ディスカッションの残りのメッセージにもいくつかの情報があります。

于 2011-05-30T00:24:18.097 に答える
4

私のために働いたGoogleCodeの小さな回避策スクリプトがあります：

http://code.google.com/p/download-data-uri/

データを含むフォームを追加して送信し、フォームを再度削除します。ハッキー、しかしそれは私のために仕事をしました。jQueryが必要です。

このスレッドはGoogleコードページの前にGoogleに表示されたので、ここにもリンクがあると便利だと思いました。

于 2012-01-11T22:32:43.373 に答える
4

これはホルフのバージョンに基づいた jQuery バージョンで、Chrome と Firefox で動作しますが、彼のバージョンは Chrome でしか動作しないようです。これを行うために体に何かを追加するのは少し奇妙ですが、誰かがより良い選択肢を持っているなら、私はそれで十分です.

var exportFileName = "export-" + filename;
$('<a></a>', {
    "download": exportFileName,
    "href": "data:," + JSON.stringify(exportData, null,5),
    "id": "exportDataID"
}).appendTo("body")[0].click().remove();
于 2014-02-20T17:25:31.977 に答える
2

(この回答は新しいテクノロジーによって廃止されましたが、歴史的な関心のためにここに保持されます。)

ちょっとハックですが、私は以前に同じ状況にありました。javascript でテキスト ファイルを動的に生成していましたが、データ URI でエンコードしてダウンロードできるようにしたいと考えていました。

これは、マイナーな大規模なユーザー介入で可能です。リンクを生成し<a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>ます。私が言ったように、これはエレガントではありませんが、専門的な解決策が必要ない場合はうまくいきます.

最初にフラッシュを使用して名前をクリップボードにコピーすることで、この問題を軽減できます。もちろん、Flash や Java を使用できるようにすれば (ブラウザのサポートがますます少なくなっていると思いますが?)、これを行う別の方法を見つけることができるでしょう。

于 2011-05-30T00:18:06.990 に答える
-2

Chrome と FireFox では、実際にこれを実現できます。

次の URL を試してみてください。使用したコードがダウンロードされます。

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==
于 2016-11-26T15:33:10.010 に答える