156

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

サーバーサイドでやったほうがいいのはわかっていますが、このプロジェクトはちょっとした楽しみのためのものです。

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

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

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

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

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

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

誰かが別の解決策または何らかの回避策を考えられますか?

4

12 に答える 12

246

ファイルに（デフォルトの「ダウンロード」の代わりに）提案された名前を付けたい場合は、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");
于 2013-04-05T11:23:20.610 に答える
51

アイデア:

于 2010-10-12T15:24:33.177 に答える
28

私の経験を共有し、誰かが 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);
于 2014-12-04T01:28:31.750 に答える
21

これは、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;
}

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

ダウンロード -> フラッシュが必要

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

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

于 2016-04-26T20:11:18.887 に答える
13

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

  1. ファイルへの保存をサポートするキャンバスの例。document.location.hrefデータURIに設定するだけです。
  2. アンカーのダウンロード例。<a href="your-data-uri" download="filename.txt">ファイル名を指定するために使用します。
于 2012-02-27T10:55:51.937 に答える
7

@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');
于 2017-01-13T03:17:09.747 に答える
2

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");
于 2017-01-02T23:12:42.007 に答える
0

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

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

于 2010-10-12T15:25:03.177 に答える