Unduh file url data

Saya bermain-main dengan ide untuk membuat utilitas zip / unzip berbasis JavaScript yang dapat diakses siapa pun dari browser. Mereka cukup menyeret zip mereka langsung ke browser dan itu akan memungkinkan mereka mengunduh semua file di dalamnya. Mereka juga dapat membuat file zip baru dengan menyeret file satu per satu.

Saya tahu akan lebih baik melakukannya di sisi server, tetapi proyek ini hanya untuk sedikit kesenangan.

Menarik file ke browser seharusnya cukup mudah jika saya memanfaatkan berbagai metode yang tersedia. (Gaya Gmail)

Encoding / decoding semoga baik-baik saja. Saya telah melihat beberapa perpustakaan zip as3 jadi saya yakin saya harus baik-baik saja dengan itu.

Masalah saya adalah mengunduh file di bagian akhir.

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

ini berfungsi dengan baik di firefox tetapi tidak di chrome.

Saya dapat menyematkan file sebagai gambar dengan baik di chrome menggunakan <img src="data:jpg/image;ba.." />, tetapi file tidak harus berupa gambar. Mereka bisa dalam format apapun.

Adakah yang bisa memikirkan solusi lain atau semacam solusi?

Ide ide:

• Coba <a href="data:...." target="_blank">(Belum Teruji)

• Gunakan downloadify alih-alih URL data (juga akan berfungsi untuk IE)

Jika Anda juga ingin memberikan nama yang disarankan untuk file tersebut (alih-alih 'unduh' default), Anda dapat menggunakan yang berikut ini di Chrome, Firefox, dan beberapa versi 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;
}

Dan contoh berikut menunjukkan kegunaannya:

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

atau:

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

Ingin berbagi pengalaman saya dan membantu seseorang terjebak pada unduhan yang tidak berfungsi di Firefox dan memperbarui jawaban untuk 2014. Cuplikan di bawah ini akan berfungsi di firefox dan chrome dan itu akan menerima nama file:

  // 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);

Berikut adalah solusi JavaScript murni yang saya uji berfungsi di Firefox dan Chrome tetapi tidak di Internet Explorer:

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;
}

Solusi lintas browser ditemukan hingga sekarang:

downloadify -> Membutuhkan Flash

databounce -> Diuji di IE 10 dan 11, dan tidak berhasil untuk saya. Membutuhkan servlet dan beberapa kustomisasi. (Salah mendeteksi navigator. Saya harus mengatur IE dalam mode kompatibilitas untuk menguji, charset default di servlet, objek opsi JavaScript dengan jalur servlet yang benar untuk jalur absolut ...) Untuk browser non-IE, ini membuka file di jendela yang sama.

download.js -> http://danml.com/download.html Pustaka lain yang serupa tetapi belum diuji. Mengklaim sebagai JavaScript murni, tidak memerlukan servlet atau Flash, tetapi tidak berfungsi di IE <= 9.

Ada beberapa solusi tetapi mereka bergantung pada HTML5 dan belum diterapkan sepenuhnya di beberapa browser. Contoh di bawah telah diuji di Chrome dan Firefox (sebagian berfungsi).

1. Contoh kanvas dengan dukungan simpan ke file. Cukup setel Anda document.location.hrefke URI data.
2. Contoh unduhan jangkar . Ini digunakan <a href="your-data-uri" download="filename.txt">untuk menentukan nama file.

Menggabungkan jawaban dari @owencm dan @ Chazt3n, fungsi ini memungkinkan pengunduhan teks dari IE11, Firefox, dan Chrome. (Maaf, saya tidak memiliki akses ke Safari atau Opera, tapi tolong tambahkan komentar jika Anda mencoba dan berhasil.)

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

Untuk siapa pun yang mengalami masalah di IE:

Silakan pilih jawabannya di sini oleh Yetti: menyimpan kanvas secara lokal di 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");

Masalah Anda pada dasarnya bermuara pada "tidak semua browser mendukung ini".

Anda dapat mencoba solusi dan menyajikan file yang telah dibuka zipnya dari objek Flash, tetapi kemudian Anda akan kehilangan kemurnian hanya-JS (bagaimanapun, saya tidak yakin apakah Anda saat ini dapat "menyeret file ke browser" tanpa solusi Flash - apakah itu mungkin fitur HTML5?)