Pobierz plik adresu URL danych

Bawię się pomysłem stworzenia całkowicie opartego na JavaScript narzędzia do zip / unzip, do którego każdy może uzyskać dostęp z przeglądarki. Mogą po prostu przeciągnąć plik zip bezpośrednio do przeglądarki, co pozwoli im pobrać wszystkie pliki. Mogą również tworzyć nowe pliki zip, przeciągając pojedyncze pliki do.

Wiem, że lepiej byłoby zrobić to na serwerze, ale ten projekt jest tylko dla odrobiny zabawy.

Przeciąganie plików do przeglądarki powinno być łatwe, jeśli skorzystam z różnych dostępnych metod. (Styl Gmail)

Miejmy nadzieję, że kodowanie / dekodowanie powinno być w porządku. Widziałem kilka bibliotek as3 zip, więc jestem pewien, że powinienem być w porządku.

Moim problemem jest pobieranie plików na końcu.

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

działa to dobrze w firefox, ale nie w chrome.

Mogę osadzać pliki jako obrazy dobrze w chrome używając <img src="data:jpg/image;ba.." />, ale pliki niekoniecznie muszą być obrazami. Mogą mieć dowolny format.

Czy ktoś może wymyślić inne rozwiązanie lub jakieś obejście?

Pomysły:

• Wypróbuj <a href="data:...." target="_blank">(nieprzetestowane)

• Użyj downloadify zamiast adresów URL danych (zadziała również dla IE)

Jeśli chcesz również nadać plikowi sugerowaną nazwę (zamiast domyślnego `` pobierania ''), możesz użyć następujących w Chrome, Firefox i niektórych wersjach 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;
}

A poniższy przykład pokazuje jego użycie:

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

lub:

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

Chcę podzielić się moim doświadczeniem i pomóc komuś, kto utknął w pobieranych plikach, które nie działają w Firefoksie i zaktualizowanej odpowiedzi na 2014 rok. Poniższy fragment będzie działał zarówno w przeglądarce Firefox, jak i Chrome i przyjmie nazwę pliku:

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

Oto czyste rozwiązanie JavaScript, które testowałem, działając w przeglądarkach Firefox i Chrome, ale nie w Internet Explorerze:

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

Dotychczas znalezione rozwiązania dla różnych przeglądarek:

downloadify -> Wymaga Flasha

databounce -> Testowane w IE 10 i 11 i nie działa dla mnie. Wymaga serwletu i pewnych dostosowań. (Nieprawidłowo wykrywa nawigator. Musiałem ustawić IE w trybie zgodności, aby przetestować, domyślny zestaw znaków w serwlecie, obiekt opcji JavaScript z poprawną ścieżką do serwletu dla ścieżek bezwzględnych ...) W przypadku przeglądarek innych niż IE otwiera plik w tym samym oknie.

download.js -> http://danml.com/download.html Inna biblioteka podobna, ale nie przetestowana. Twierdzi, że jest czystym JavaScriptem, nie wymaga serwletu ani Flasha, ale nie działa w IE <= 9.

Istnieje kilka rozwiązań, ale zależą one od HTML5 i nie zostały jeszcze w pełni zaimplementowane w niektórych przeglądarkach. Poniższe przykłady zostały przetestowane w Chrome i Firefox (częściowo działa).

1. Przykład płótna z obsługą zapisywania do pliku. Po prostu ustaw swój document.location.hrefidentyfikator URI danych.
2. Przykład pobierania kotwicy . Używa <a href="your-data-uri" download="filename.txt">do określenia nazwy pliku.

Łącząc odpowiedzi z @owencm i @ Chazt3n, ta funkcja pozwoli na pobranie tekstu z IE11, Firefoxa i Chrome. (Przepraszamy, nie mam dostępu do Safari ani Opery, ale jeśli spróbujesz i zadziała, dodaj komentarz).

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

Dla każdego, kto ma problemy z IE:

Proszę, zagłosuj za odpowiedzią Yetti: zapisywanie kanwy lokalnie w 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");

Twój problem zasadniczo sprowadza się do stwierdzenia, że ​​„nie wszystkie przeglądarki to obsługują”.

Możesz wypróbować obejście i udostępnić rozpakowane pliki z obiektu Flash, ale wtedy stracisz czystość samego JS (w każdym razie nie jestem pewien, czy możesz obecnie „przeciągać pliki do przeglądarki” bez jakiegoś rozwiązania Flash - czy to może funkcja HTML5?)