データURLファイルをダウンロード

私は、誰もがブラウザからアクセスできる完全にJavaScriptベースのzip / unzipユーティリティを作成するというアイデアを試しています。zipをブラウザに直接ドラッグするだけで、その中にあるすべてのファイルをダウンロードできます。また、個々のファイルをドラッグして新しいzipファイルを作成することもできます。

サーバーサイドでやった方がいいと思いますが、このプロジェクトはちょっとした楽しみのためだけのものです。

利用可能なさまざまな方法を利用すれば、ファイルをブラウザーにドラッグするのは簡単です。（Gmailスタイル）

エンコード/デコードはうまくいけばうまくいくはずです。私はいくつかのas3 zipライブラリを見たので、私はそれで大丈夫だと確信しています。

私の問題は、最後にファイルをダウンロードすることです。

window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....' 

これはFirefoxでは正常に機能しますが、Chromeでは機能しません。

私は使用してクロムでうまく画像としてファイルを埋め込むことができます <img src="data:jpg/image;ba.." />が、ファイルは必ずしも画像であるとは限りません。それらは任意の形式にすることができます。

誰かが別の解決策や何らかの回避策を考えることができますか？

アイデア：

• <a href="data:...." target="_blank">（未テスト）を試す

• データURLの代わりにdownloadifyを使用します（IEでも機能します）

（デフォルトの「ダウンロード」の代わりに）ファイルに推奨される名前を付けたい場合は、Chrome、Firefox、および一部のIEバージョンで以下を使用できます。

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

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

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
}

download("data:text/html,HelloWorld!", "helloWorld.txt");

または：

function download(url, filename) {
fetch(url).then(function(t) {
    return t.blob().then((b)=>{
        var a = document.createElement("a");
        a.href = URL.createObjectURL(b);
        a.setAttribute("download", filename);
        a.click();
    }
    );
});
}

download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,HelloWorld!", "helloWorld.txt");

私の経験を共有して、誰かがFirefoxで動作しないダウンロードに立ち往生し、2014への回答を更新したいと思います。以下のスニペットは、firefoxとchromeの両方で機能し、ファイル名を受け入れます。

  // Construct the <a> element
  var link = document.createElement("a");
  link.download = thefilename;
  // Construct the uri
  var uri = 'data:text/csv;charset=utf-8;base64,' + someb64data
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  // Cleanup the DOM
  document.body.removeChild(link);

以下は、FirefoxとChromeでは動作するがInternet Explorerでは動作しない、テスト済みの純粋なJavaScriptソリューションです。

function downloadDataUrlFromJavascript(filename, dataUrl) {

    // Construct the 'a' element
    var link = document.createElement("a");
    link.download = filename;
    link.target = "_blank";

    // Construct the URI
    link.href = dataUrl;
    document.body.appendChild(link);
    link.click();

    // Cleanup the DOM
    document.body.removeChild(link);
    delete link;
}

これまでに見つかったクロスブラウザソリューション：

downloadify-> Flashが必要

databounce-> IE 10および11でテストされており、動作しません。サーブレットといくつかのカスタマイズが必要です。（ナビゲーターを誤って検出します。テストするにはIEを互換モードに設定し、サーブレットのデフォルトの文字セット、絶対パスの正しいサーブレットパスを持つJavaScriptオプションオブジェクトを設定する必要がありました...）非IEブラウザーの場合、同じウィンドウでファイルを開きます。

download.js-> http://danml.com/download.html同様のライブラリですが、テストされていません。サーブレットもFlashも必要としない純粋なJavaScriptであると主張しているが、IE <= 9では動作しない。

いくつかの解決策がありますが、それらはHTML5に依存しており、一部のブラウザーではまだ完全に実装されていません。以下の例はChromeとFirefoxでテストされています（一部動作します）。

1. ファイルへの保存をサポートするCanvasの例。をdocument.location.hrefデータURIに設定するだけです。
2. アンカーダウンロード例。<a href="your-data-uri" download="filename.txt">ファイル名の指定に使用します。

この関数は、@ owencmと@ Chazt3nからの回答を組み合わせて、IE11、Firefox、およびChromeからテキストをダウンロードできるようにします。（申し訳ありませんが、SafariやOperaにはアクセスできませんが、機能する場合はコメントを追加してください。）

initiate_user_download = function(file_name, mime_type, text) {
    // Anything but IE works here
    if (undefined === window.navigator.msSaveOrOpenBlob) {
        var e = document.createElement('a');
        var href = 'data:' + mime_type + ';charset=utf-8,' + encodeURIComponent(text);
        e.setAttribute('href', href);
        e.setAttribute('download', file_name);
        document.body.appendChild(e);
        e.click();
        document.body.removeChild(e);
    }
    // IE-specific code
    else {
        var charCodeArr = new Array(text.length);
        for (var i = 0; i < text.length; ++i) {
            var charCode = text.charCodeAt(i);
            charCodeArr[i] = charCode;
        }
        var blob = new Blob([new Uint8Array(charCodeArr)], {type: mime_type});
        window.navigator.msSaveOrOpenBlob(blob, file_name);
    }
}

// Example:
initiate_user_download('data.csv', 'text/csv', 'Sample,Data,Here\n1,2,3\n');

IEで問題が発生している場合：

Yettiの回答をここで賛成してください： キャンバスをIEでローカルに保存

dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

var blob = dataURItoBlob(uri);
window.navigator.msSaveOrOpenBlob(blob, "my-image.png");

あなたの問題は本質的に「すべてのブラウザがこれをサポートするわけではない」ということになります。

Flashオブジェクトから回避策を試して解凍されたファイルを提供することはできますが、JSのみの純粋さが失われます（とにかく、何らかのFlash回避策なしに現在「ファイルをブラウザにドラッグ」できるかどうかはわかりません。 -HTML5機能でしょうか？）