Veri url dosyasını indirin

Herkesin bir tarayıcıdan erişebileceği tamamen JavaScript tabanlı bir zip / unzip yardımcı programı yapma fikrini oynuyorum. Zip'lerini doğrudan tarayıcıya sürükleyebilirler ve bu, içindeki tüm dosyaları indirmelerine izin verir. Ayrı ayrı dosyaları sürükleyerek yeni zip dosyaları da oluşturabilirler.

Bunu sunucu tarafında yapmanın daha iyi olacağını biliyorum ama bu proje sadece biraz eğlence amaçlı.

Mevcut çeşitli yöntemlerden yararlanırsam, dosyaları tarayıcıya sürüklemek yeterince kolay olacaktır. (Gmail stili)

Kodlama / kod çözme umarım iyi olur. Bazı as3 zip kitaplıkları gördüm, bu yüzden bu konuda sorun olmayacağından eminim.

Sorunum, dosyaların sonunda indirilmesidir.

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

bu, firefox'ta iyi çalışır, ancak chrome'da çalışmaz.

Dosyaları kullanarak Chrome'da gayet iyi görüntüler olarak yerleştirebilirim <img src="data:jpg/image;ba.." /> , ancak dosyalar mutlaka resim olmayacak. Herhangi bir format olabilirler.

Başka bir çözüm veya bir tür geçici çözüm düşünebilen var mı?

fikirler:

• <a href="data:...." target="_blank">(Test edilmemiş) deneyin

• Kullan downloadify (aynı zamanda IE için çalışacak) yerine veri URL'lerin

Ayrıca dosyaya önerilen bir ad vermek istiyorsanız (varsayılan 'indirme' yerine) aşağıdakileri Chrome, Firefox ve bazı IE sürümlerinde kullanabilirsiniz:

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

Ve aşağıdaki örnek, bunun kullanıldığını gösterir:

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

veya:

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

Deneyimlerimi paylaşmak ve Firefox'ta çalışmayan indirmelerde takılıp kalan birine yardım etmek ve 2014'e verilen yanıtı güncellemek istiyorum. Aşağıdaki ön bilgi hem firefox hem de chrome'da çalışacak ve bir dosya adını kabul edecek:

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

İşte Firefox ve Chrome'da test ettiğim ancak Internet Explorer'da test etmediğim saf bir JavaScript çözümü:

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

Şimdiye kadar bulunan tarayıcılar arası çözümler:

downloadify -> Flash gerektirir

databounce -> IE 10 ve 11'de test edildi ve benim için çalışmıyor. Sunucu uygulaması ve bazı özelleştirme gerektirir. (Gezgini yanlış algıladı. Test etmek için IE'yi uyumluluk moduna, sunucu uygulamasında varsayılan karakter kümesine, mutlak yollar için doğru sunucu uygulamacığı yoluna sahip JavaScript seçenekleri nesnesine ayarlamam gerekiyordu ...) IE olmayan tarayıcılar için, dosyayı aynı pencerede açar.

download.js -> http://danml.com/download.html Benzer ancak test edilmemiş başka bir kitaplık. Saf JavaScript olduğunu iddia eder, sunucu uygulaması veya Flash gerektirmez, ancak IE <= 9 üzerinde çalışmaz.

Birkaç çözüm var ancak bunlar HTML5'e bağlı ve henüz bazı tarayıcılarda tam olarak uygulanmadı. Aşağıdaki örnekler Chrome ve Firefox'ta test edilmiştir (kısmen çalışır).

1. Dosyaya kaydetme desteğiyle tuval örneği . document.location.hrefVeri URI'sini ayarlamanız yeterlidir.
2. Çapa indirme örneği . <a href="your-data-uri" download="filename.txt">Dosya adını belirtmek için kullanır .

@Owencm ve @ Chazt3n'den gelen yanıtları birleştiren bu işlev, metinlerin IE11, Firefox ve Chrome'dan indirilmesine izin verir. (Üzgünüm, Safari veya Opera'ya erişimim yok, ancak denerseniz ve çalışırsa lütfen bir yorum ekleyin.)

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'de sorunları olan herkes için:

Lütfen Yeti tarafından yazılan yanıtı destekleyin: tuvali IE'de yerel olarak kaydetme

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

Sorununuz esasen "tüm tarayıcılar bunu desteklemeyecek" şeklinde özetlenebilir.

Bir geçici çözüm deneyebilir ve sıkıştırılmış dosyaları bir Flash nesnesinden sunabilirsiniz, ancak daha sonra yalnızca JS saflığını kaybedersiniz (yine de, şu anda bir tür Flash geçici çözümü olmadan "dosyaları tarayıcıya sürükleyip sürükleyemeyeceğinizden" emin değilim - bu bir HTML5 özelliği olabilir mi?)