Download gegevens-URL-bestand

Ik speel met het idee om een volledig JavaScript-gebaseerd zip/unzip-hulpprogramma te maken waartoe iedereen toegang heeft vanuit een browser. Ze kunnen hun zip gewoon rechtstreeks naar de browser slepen en ze kunnen alle bestanden erin downloaden. Ze kunnen ook nieuwe zip-bestanden maken door individuele bestanden naar binnen te slepen.

Ik weet dat het beter is om het serverside te doen, maar dit project is gewoon voor de lol.

Het zou gemakkelijk genoeg moeten zijn om bestanden naar de browser te slepen als ik gebruik maak van de verschillende beschikbare methoden. (Gmail-stijl)

Het coderen/decoderen zou hopelijk in orde moeten zijn. Ik heb een aantal as3 zip-bibliotheken gezien, dus ik weet zeker dat ik daarmee in orde zou moeten zijn.

Mijn probleem is het downloaden van de bestanden aan het einde.

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

dit werkt prima in Firefox, maar niet in Chrome.

Ik kan de bestanden prima als afbeeldingen insluiten in Chrome met behulp van <img src="data:jpg/image;ba.." />, maar de bestanden zijn niet per se afbeeldingen. Ze kunnen elk formaat zijn.

Kan iemand een andere oplossing of een soort van tijdelijke oplossing bedenken?


Antwoord 1, autoriteit 100%

Ideeën:

  • Probeer een <a href="data:...." target="_blank">(niet getest)

  • Gebruik downloadifyin plaats van gegevens-URL’s (zou ook voor IE werken)


Antwoord 2, autoriteit 99%

Als u ook een voorgestelde naam aan het bestand wilt geven (in plaats van de standaard ‘download’), kunt u het volgende gebruiken in Chrome, Firefox en sommige IE-versies:

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

En het volgende voorbeeld toont het gebruik ervan:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

Antwoord 3, autoriteit 95%

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

Antwoord 4, autoriteit 56%

Wil mijn ervaring delen en iemand helpen die vastzit in de downloads die niet werken in Firefox en het antwoord op 2014 bijwerken.
Het onderstaande fragment werkt in zowel Firefox als Chrome en accepteert een bestandsnaam:

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

Antwoord 5, autoriteit 30%

Hier is een pure JavaScript-oplossing die ik heb getest in Firefox en Chrome, maar niet in 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;
}

Cross-browser oplossingen tot nu toe gevonden:

downloaden -> Flash vereist

databounce -> Getest in IE 10 en 11, en werkt niet voor mij. Vereist een servlet en wat aanpassingen. (Onjuist detecteert navigator. Ik moest IE in compatibiliteitsmodus zetten om te testen, standaard karakterset in servlet, JavaScript-optieobject met correct servletpad voor absolute paden…) Voor niet-IE-browsers opent het het bestand in hetzelfde venster.

download.js -> http://danml.com/download.htmlEen andere vergelijkbare bibliotheek, maar niet getest. Beweert puur JavaScript te zijn, geen servlet of Flash nodig, maar werkt niet op IE <= 9.


Antwoord 6, autoriteit 26%

Er zijn verschillende oplossingen, maar deze zijn afhankelijk van HTML5 en zijn nog niet volledig geïmplementeerd in sommige browsers. Onderstaande voorbeelden zijn getest in Chrome en Firefox (werkt gedeeltelijk).

  1. Canvas-voorbeeldmet ondersteuning voor opslaan naar bestand. Stel gewoon uw document.location.hrefin op de gegevens-URI.
  2. Ankerdownloadvoorbeeld. Het gebruikt <a href="your-data-uri" download="filename.txt">om de bestandsnaam op te geven.

Antwoord 7, autoriteit 14%

Door antwoorden van @owencm en @Chazt3n te combineren, maakt deze functie het downloaden van tekst van IE11, Firefox en Chrome mogelijk. (Sorry, ik heb geen toegang tot Safari of Opera, maar voeg alsjeblieft een opmerking toe als je het probeert en het werkt.)

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

Antwoord 8, autoriteit 6%

Dit kan 100% volledig met HTML alleen worden opgelost.Stel het kenmerk hrefin op "data:(mimetypeheader),(url)". Bijvoorbeeld…

<a
    href="data:video/mp4,http://www.example.com/video.mp4"
    target="_blank"
    download="video.mp4"
>Download Video</a>

Werkvoorbeeld: JSFiddle-demo.

Omdat we een gegevens-URL gebruiken, mogen we het mimetype instellen dat het type gegevens aangeeft dat moet worden gedownload. Documentatie:

Gegevens-URL’s bestaan uit vier delen: een voorvoegsel (data:), een MIME-type dat het type gegevens aangeeft, een optioneel base64-token indien niet-tekstueel, en de gegevens zelf. (Bron: MDN-webdocumenten: gegevens-URI’s. )

Componenten:

  • <a ...>: De link-tag.
  • href="data:video/mp4,http://www.example.com/video.mp4": hier stellen we de link in naar de a data:met een header die vooraf is geconfigureerd als video/mp4. Dit wordt gevolgd door de header mimetype. D.w.z. voor een .txt-bestand zou het text/plainzijn. En dan scheidt een komma het van de link die we willen downloaden.
  • target="_blank": dit geeft aan dat een nieuw tabblad moet worden geopend, het is niet essentieel, maar het helpt de browser naar het gewenste gedrag te leiden.
  • download: dit is de naam van het bestand dat je downloadt.

Antwoord 9, autoriteit 4%

Voor iedereen die problemen heeft met IE:

Upvote het antwoord hier door Yetti:
canvas lokaal opslaan in 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");

Antwoord 10, autoriteit 2%

Als u alleen daadwerkelijk een downloadactie nodig heeft, bijvoorbeeld als u deze bindt aan een knop die de URL direct genereert wanneer erop wordt geklikt (in Vue of React bijvoorbeeld), kunt u zoiets eenvoudigs doen als dit:

const link = document.createElement('a')
link.href = url
link.click()

In mijn geval heeft het bestand al de juiste naam, maar je kunt het indien nodig instellen dankzij filename.


Antwoord 11

Uw probleem komt in wezen neer op “niet alle browsers zullen dit ondersteunen”.

Je zou een tijdelijke oplossing kunnen proberen en de uitgepakte bestanden van een Flash-object kunnen weergeven, maar dan zou je de JS-zuiverheid verliezen (hoe dan ook, ik weet niet zeker of je momenteel zonder enige vorm van “bestanden naar de browser kunt slepen” van Flash-oplossing – is dat misschien een HTML5-functie?)


Antwoord 12

export const downloadAs = async (url: string, name: string) => {
  const blob = await axios.get(url, {
    headers: {
      'Content-Type': 'application/octet-stream',
    },
    responseType: 'blob',
  });
  const a = document.createElement('a');
  const href = window.URL.createObjectURL(blob.data);
  a.href = href;
  a.download = name;
  a.click();
};

Other episodes