web-dev-qa-db-ja.com

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

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

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

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

エンコード/デコードはうまくいけばうまくいきます。私はいくつかのas3 Zipライブラリを見てきましたので、私はそれで問題ないはずです。

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

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

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

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

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

javascriptdata-url
91
Mikee

アイデア：

  • <a href="data:...." target="_blank">を試してください（未テスト）

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

34
Pekka 웃

（デフォルトの「ダウンロード」の代わりに）ファイルに推奨名を付けたい場合は、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");
152
owencm

私の経験を共有し、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);
25
Martino Dino
function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
  return false;
}

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");
19
Zibri

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

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

以下は、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オプションオブジェクトを設定する必要があった...）同じウィンドウ内のファイル。

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

10
Jesus M C

@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');
7
kevinarpe

JavaScriptを介してデータURLのダウンロードを開始することもできます。このような解決策については、 https://stackoverflow.com/a/13696029/271577 を参照してください（テキストリンクの例と共に）。

2
Brett Zamir

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");
1
Chazt3n

引用 this answer：

ファイルをダウンロードし、base64としてユーザーに提供します（CORSの問題を回避するため）

$.get(/*...*/,function (result)
{
    var blob=new Blob([result]);
    var link=document.createElement('a');
    link.href=window.URL.createObjectURL(blob);
    link.download="myFileName.txt";
    link.click();

});

これは、IE 10 +、Chrome 8 +、FF 4+です。 https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL を参照してください

Chrome、Firefox、Operaでのみファイルをダウンロードします。これは、アンカータグのダウンロード属性を使用して、ブラウザに強制的にダウンロードさせます。

0
danielmhanover

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

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

0
Piskvor