data：URIを使用するときに推奨されるファイル名を指定する方法はありますか？

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

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

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

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

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

html5-demos.appspot.com / ...でのライブサンプル。

現在、 Chrome、Firefox、Edge、Opera、デスクトップSafariで動作しますが、iOS SafariまたはIE11では動作しません。

最近のChromeでは、これが非常に簡単になっています。

function saveContent(fileContents, fileName)
{
    var link = document.createElement('a');
    link.download = fileName;
    link.href = 'data:,' + fileContents;
    link.click();
}

HTMLのみ：download属性を使用：

<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Download transparent png</a>

JavaScriptのみ：次のコードで任意のデータURIを保存できます。

function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);
    
    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

var file = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
saveAs(file, 'logo.gif');

Chrome、Firefox、およびEdge 13以降では、指定されたファイル名が使用されます。

IE11、Edge 12、およびSafari 9（これらはdownload属性をサポートしていません）は、デフォルト名でファイルをダウンロードするか、サポートされているファイルタイプ（画像、ビデオ、オーディオファイル）の場合、新しいタブに単に表示します、…

RFC 2397によれば、いいえ、ありません。

また、使用できる要素の属性<a>もありません。

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

私は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

私は何もないのではないかと思うので、あなたは今のところ解決策の検索をやめることができると思います:)

このスレッドで通知されているようdownloadに、html5には属性があり、Firefox 20でも機能しますhttp://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

次の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")

番号。

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

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

サンプル：

<a download="abcd.cer"
    href="data:application/stream;base64,MIIDhTC......">down</a>

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

見積もり：

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

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

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

Service Worker を使用すると、これが本当の意味でようやく可能になります。

1. 偽のURLを作成します。たとえば、/ saveAs / myPrettyName.jpg
2. URLを<a href, <img srcwindow.open（url）で使用します。これは、「実際の」URLで実行できるすべてのものです。
3. ワーカー内でフェッチイベントをキャッチし、正しいデータで応答します。

ユーザーが新しいタブでファイルを開いてそこに保存しようとした場合でも、ブラウザーは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 );
    }
});

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

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

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

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

これはHolfのバージョンに基づいた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();

それは一種のハックですが、私は以前に同じ状況にありました。私はJavaScriptでテキストファイルを動的に生成していて、data-URIでエンコードしてダウンロード用に提供したいと考えていました。

これは、マイナーなメジャーユーザーの介入で可能です。リンクを生成する<a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>ます。先ほど述べたように、これは洗練されていませんが、専門的なソリューションが必要ない場合に機能します。

最初にフラッシュを使用して名前をクリップボードにコピーすることで、これをより簡単にすることができます。もちろん、FlashやJavaを使用させた場合（ブラウザーのサポートが減っていると思いますか？）、これを行う別の方法を見つけることができるでしょう。

これはFirefox 43.0（以前はテストされていません）で動作します：

dl.js：

function download() {
  var msg="Hello world!";
  var blob = new File([msg], "hello.bin", {"type": "application/octet-stream"});

  var a = document.createElement("a");
  a.href = URL.createObjectURL(blob);

  window.location.href=a;
}

dl.html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <script type="text/javascript" src="dl.js"></script>
</head>

<body>
<button id="create" type="button" onclick="download();">Download</button>
</body>
</html>

ボタンをクリックすると、hello.binという名前のファイルがダウンロード用に提供されます。トリックは、Blobの代わりにFileを使用することです。

リファレンス：https : //developer.mozilla.org/de/docs/Web/API/File

var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
var sessionId ='\n';
var token = '\n';
var caseId = CaseIDNumber + '\n';
var url = casewebUrl+'\n';
var uri = sessionId + token + caseId + url;//data in file
var fileName = "file.i4cvf";// any file name with any extension
if (isIE)
    {
            var fileData = ['\ufeff' + uri];
            var blobObject = new Blob(fileData);
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
    }
    else //chrome
    {
        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
         window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
            fs.root.getFile(fileName, { create: true }, function (fileEntry) { 
                fileEntry.createWriter(function (fileWriter) {
                    var fileData = ['\ufeff' + uri];
                    var blob = new Blob(fileData);
                    fileWriter.addEventListener("writeend", function () {
                        var fileUrl = fileEntry.toURL();
                        var link = document.createElement('a');
                        link.href = fileUrl;
                        link.download = fileName;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }, false);
                    fileWriter.write(blob);
                }, function () { });
            }, function () { });
         }, function () { });
    }

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

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

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==