C’è un modo per specificare un nome di file suggerito quando si utilizzano dati: URI?

Per esempio se segui il link:

data:application/octet-stream;base64,SGVsbG8=

Il browser vi chiederà di scaricare un file composto dei dati contenuti come base64 in un collegamento ipertestuale. C’è un modo di suggerire un nome di default nel markup? Se non c’è una soluzione di JavaScript?

forse non correlato a questo problema, ma io suggerisco di usare blob & URL.createObjectURL se questo non è un server o vecchio browser ostacolo
Alcuni browser supportano il mediatype il parametro opzionale “nome”: data:application/pdf;name=document.pdf;base64,BASE64_DATA_ENCODED
Ho avuto il problema con Firefox pdf.js che tende a bloccarsi in alcuni casi, se non è possibile estrarre un file dai dati uri. vedere stackoverflow.com/questions/45585921/…
Che browser supportano il parametro “name”? Può indicarmi qualche riferimento documentazione? (il mio google-fu non è riuscito a me).
Almeno Firefox in quel momento. Sembra che non sia più il caso. Si riferisce al Contenuto MIME-Type (!= Content-Disposition) parametro “name” (non in RFC?)

OriginaleL’autore | 2008-11-12

15 Replies
  1. 137

    Utilizzare il download attributo:

    <a download='FileName' href='your_url'>

    Esempio vivo in html5-demos.appspot.com/….

    Attualmente lavora sul Chrome, Firefox, Edge, l’Opera, ma non Safari 10 o IE11.

    Funziona anche con i dati:URI in chrome. Vedi: jsfiddle.net/pYpqW
    ma non si può fare con window.location.replace. se ad esempio si desidera creare un data:uri o quello generato da window.URL.createObjectURL, e scaricare il file, dovrete creare un <a> fare clic su: jsfiddle.net/flyingsheep/wpQtH (no, $(...).click() non funziona)
    Solo se tutti i browser erano come Chrome… [sospiro]
    href=”data:text/plain” Test di scarica=”test.txt”>’)[0].fare clic su() sembra funzionare bene qui (Chrome 23) (nota: I usato nativo click metodo, non jQuery). Demo: jsfiddle.net/2zsRW
    Si può vedere la compatibilità con i browser qui caniuse.com/#search=download

    OriginaleL’autore Dan Fabulich

  2. 59

    Chrome rende questo molto semplice in questi giorni:

    function saveContent(fileContents, fileName)
    {
        var link = document.createElement('a');
        link.download = fileName;
        link.href = 'data:,' + fileContents;
        link.click();
    }
    Idk cosa tutte queste altre risposte, si parla di questa lavorato sul primo tentativo in Chrome 30.
    Non ora, ma non è sempre così facile. Molte di queste risposte sono da anni fa. E funzionano anche per altri browser.
    Fare riferimento a http://caniuse.com/#feat=download per una lista completa delle compatibilità con i browser.
    Nonostante le informazioni contenute in quella pagina, non funziona nel mio firefox 44. Lavorando bene in Chrome. 48
    Ciao @Holf c’è un modo di aggiungere anche il tipo di file o l’estensione o la sua semplice quanto spceficy come nome del file?

    OriginaleL’autore Holf

  3. 38

    Secondo RFC 2397, no, non c’è.

    Né ci sembra essere attributo del <a> elemento che è possibile utilizzare.

    Tuttavia HTML5 ha successivamente introdotto il download attributo <a> elemento, anche se al momento di scrivere il supporto non è universale (non MSIE di supporto, per esempio)

    la seconda frase era giusta, al momento della scrittura, ma non è più. ora come ora, non è ancora una pratica poco diffusa, anche se.
    interessante, grazie per il link!
    non era 3 anni fa, quando ho scritto quel commento
    secondo caniuse.com/#feat=download ancora non
    È…… sicuramente ci sono escluse IE.

    OriginaleL’autore Alnitak

  4. 21

    Ho guardato un po ‘ in firefox fonti netwerk/protocol/data/nsDataHandler.cpp

    gestore di dati solo analizza il contenuto/tipo di charset, e guarda se c’è “;base64”
    nella stringa

    rfc specifices non il nome del file e almeno firefox gestisce senza nome,
    il codice genera un nome casuale plus “.parte”

    Ho anche controllato firefox registro

    [b2e140]: DOCSHELL 6e5ae00 InternalLoad data:application/octet-stream;base64,SGVsbG8=
    [b2e140]: Found extension '' (filename is '', handling attachment: 0)
    [b2e140]: HelperAppService::DoContent: mime 'application/octet-stream', extension ''
    [b2e140]: Getting mimeinfo from type 'application/octet-stream' ext ''
    [b2e140]: Extension lookup on '' found: 0x0
    [b2e140]: Ext. lookup for '' found 0x0
    [b2e140]: OS gave back 0x43609a0 - found: 0
    [b2e140]: Searched extras (by type), rv 0x80004005
    [b2e140]: MIME Info Summary: Type 'application/octet-stream', Primary Ext ''
    [b2e140]: Type/Ext lookup found 0x43609a0

    interessante file, se si desidera guardare mozilla fonti:

    data uri handler: netwerk/protocol/data/nsDataHandler.cpp
    where mozilla decides the filename: uriloader/exthandler/nsExternalHelperAppService.cpp
    InternalLoad string in the log: docshell/base/nsDocShell.cpp

    Penso che si può interrompere la ricerca di una soluzione per ora, perché ho il sospetto che non c’è nessuno 🙂

    come notato in questo thread html5 ha download attributo, funziona anche su firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

    Cool! Anche se non sono necessariamente d’accordo che Firefox è la massima autorità su ciò che esiste. 🙂

    OriginaleL’autore sherpya

  5. 13

    Il seguente snippet Javascript funziona in Chrome utilizzando il nuovo ‘scaricare’ attributo di link e la simulazione di un clic.

    function downloadWithName(uri, name) {
      var link = document.createElement("a");
      link.download = name;
      link.href = uri;
      link.click();
    }

    E l’esempio seguente mostra l’uso:

    downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")
    Questo non funziona in Firefox, ho aggiunto una estesa risposta qui sotto con Fx compatibilità.

    OriginaleL’autore owencm

  6. 12

    N.

    L’intero scopo è che si tratta di un flusso di dati, non è un file. I dati di origine non dovrebbe avere alcuna conoscenza dell’utente agente di gestione di un file… e non.

    Lo scopo di data: è di aggirare un blocco di interno dati in formato di URL senza dover leggere da un protocollo basato su source. Il link @silex risposta dimostra che la capacità di suggerire un nome preferito di scrivere che è considerato utile, anche se non è ancora implementato.
    Utile? Assolutamente. Tecnicamente appropriato? Non è ancora convinto. 🙂
    considerare la differenza tra il caricamento dei dati e salvataggio, solo perché un blob è codificato in linea in un dati: URL non significa che non dovrebbe avere un nome preferito per il loro salvataggio.
    Ma la tua linea su di esso “scopo” è sbagliato. data: è stato appositamente inventato per consentire la (piccola) linea contenuti vengono visualizzati in una mascherata-insieme formato di URL in modo che possa essere utilizzato da cose come i tag di immagine senza una richiesta HTTP separata. HTML dice che il contenuto di un img src attributo deve essere un URL, in modo che quello RFC 2397 creato. Non c’è “origine dati”.
    Esattamente. Non ci sono dati di origine. Non c’è contesto. L’URI dati.

    OriginaleL’autore Lightness Races in Orbit

  7. 8

    è possibile aggiungere un download attributo dell’elemento di ancoraggio.

    esempio:

    <a download="abcd.cer"
        href="data:application/stream;base64,MIIDhTC......">down</a>
    Funziona con chrome

    OriginaleL’autore cuixiping

  8. 5

    Occhiata a questo link:
    http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

    Citazione:

    Funziona anche (come in, non causa un problema); base64, alla fine

    come questo (in Opera, almeno):

    data:text/plain;charset=utf-8;headers=Content-Disposition%3A%20attachment%3B%20filename%3D%22with%20spaces.txt%22%0D%0AContent-Language%3A%20en;base64,4oiaDQo%3D

    C’è anche qualche info in il resto dei messaggi della discussione.

    purtroppo questo non scaricare.
    questa discussione era per un proposta estensione per i dati in formato URI – non è stato implementato.
    Implementata, con supporto esistente per i parametri arbitrari questo sarebbe un grande.

    OriginaleL’autore silex

  9. 4

    C’è un piccolo script della soluzione su Google il Codice che ha funzionato per me:

    http://code.google.com/p/download-data-uri/

    Si aggiunge un modulo con i dati, invia e poi rimuove il modulo di nuovo. Hacky, ma ha fatto il lavoro per me. Richiede jQuery.

    Questo thread ha dimostrato che Google in prima pagina di Codice di Google e ho pensato che potrebbe essere utile avere il link anche qui.

    Interessante script, ma non necessita di server per ottenere la risposta ans inviare di nuovo a destra? jsfiddle.net/hZySf
    Sembra di sì. Come ho scritto, hacky soluzione..
    Io non sono sicuro di dove il file viene generato da.. è che i file archiviati in base64 codifica? (Io non sono troppo familiarità con base64)
    Il “file” (vale a dire i dati) è generato da Javascript. Il contesto del progetto (e probabilmente la maggior parte qui) si supponga di disporre di un modo per ottenere i dati desiderati in una variabile JS. La differenza è che invece di presentare all’utente tramite un data:... URI, lo script crea un modulo per inviare al server. E il server quindi presumibilmente echi direttamente di nuovo come un HTTP di “scaricare” la risposta (vale a dire con un appropriato intestazione Content-Disposition specificando il nome del file).

    OriginaleL’autore Fabian B.

  10. 4

    Utilizzando addetti ai servizi di, questo è finalmente possibile, nel vero senso della parola.

    1. Creare un falso URL. Per esempio /saveAs/myPrettyName.jpg
    2. Utilizzare l’URL in <a href, <img src, finestra.open( url ), assolutamente nulla di ciò che può essere fatto con un “vero” URL.
    3. All’interno del lavoratore, prendere il fetch dell’evento, e di rispondere con i dati corretti.

    Il browser ora suggeriscono myPrettyName.jpg anche se l’utente apre il file in una nuova scheda, e tenta di salvarlo. Sarà esattamente come se il file fosse venuto dal server.

    //In the service worker
    self.addEventListener( 'fetch', function(e)
    {
        if( e.request.url.startsWith( '/blobUri/' ) )
        {
            //Logic to select correct dataUri, and return it as a Response
            e.respondWith( dataURLAsRequest );
        }
    });
    Interessante! Il supporto sembra essere abbastanza bassa per ora, anche se: caniuse.com/#feat=serviceworkers
    C’è un modo per “rispondere” con un altro diretto url di un file?

    OriginaleL’autore Adria

  11. 3

    È una specie di hackish, ma io sono stata nella stessa situazione di prima. Ero generare dinamicamente un file di testo in javascript e ha voluto fornire per il download da parte di codifica con i dati-URI.

    Questo è possibile con minorimaggiore intervento da parte dell’utente. Generare un link <a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>. Come ho detto, questo è poco elegante, ma funziona se non hai bisogno di una soluzione professionale.

    Questo potrebbe essere reso meno doloroso con l’ausilio di flash per copiare il nome in appunti prima. Naturalmente, se ti lasci usare il Flash o Java (ora meno il supporto del browser credo?), probabilmente si potrebbe trovare un altro modo per fare questo.

    Questa non è una soluzione e non rispondere a quello che è stato chiesto. Mi dispiace.
    Lol @ “minor intervento da parte dell’utente”. All’utente di fare tutto per te, non è “minore intervento da parte dell’utente”.
    Combinate questo con stackoverflow.com/questions/17311645/… per attivare il link generato e non è necessario l’intervento dell’utente. È possibile specificare il HTML5 download attributo a suggerire un nome, come indicato da varie altri risposte.
    Questa è una grande soluzione per Safari. Utilizzare Modernizr per rilevare quando il download attributo non è supportato e aggiornare il testo del link!

    OriginaleL’autore ninjagecko

  12. 3

    Qui è una versione jQuery in base al largo di Holf versione e funziona con Chrome e Firefox, mentre la sua versione sembra funzionare solo con Chrome. È un po ‘ strano per aggiungere qualcosa al corpo di fare questo, ma se qualcuno ha una soluzione migliore io sono tutto per esso.

    var exportFileName = "export-" + filename;
    $('<a></a>', {
        "download": exportFileName,
        "href": "data:," + JSON.stringify(exportData, null,5),
        "id": "exportDataID"
    }).appendTo("body")[0].click().remove();
    Con jQuery 1.11 ottengo un’eccezione a causa della .remove(). Ho preso in giro, assegnando a $().appendTo() a una variabile chiamata variable.click(); variable.remove()
    si dovrebbe ottenere l’eccezione con qualsiasi jQuery, perché ottenere il [0] da qualsiasi “jQuery elemento” deve restituire il primo elemento del DOM che rappresenta, e che è essenzialmente “esci” jQuery.
    Si effettivamente non c’è bisogno di aggiungere/rimuovere l’elemento — vedi commenti al stackoverflow.com/a/17311705/1037948

    OriginaleL’autore kgividen

  13. 2

    Questo funziona con Firefox 43.0 (anziani non testato):

    dl.js:

    function download() {
      var msg="Hello world!";
      var blob = new File([msg], "hello.bin", {"type": "application/octet-stream"});
    
      var a = document.createElement("a");
      a.href = URL.createObjectURL(blob);
    
      window.location.href=a;
    }

    dl.html

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta charset="utf-8"/>
        <title>Test</title>
        <script type="text/javascript" src="dl.js"></script>
    </head>
    
    <body>
    <button id="create" type="button" onclick="download();">Download</button>
    </body>
    </html>

    Se il pulsante viene cliccato offerto un file denominato ciao.bin per il download. Il trucco è quello di utilizzare File invece di Blob.

    di riferimento: https://developer.mozilla.org/de/docs/Web/API/File

    OriginaleL’autore NeutronenStern

  14. 0
    var isIE = /*@[email protected]*/false || !!document.documentMode; //At least IE6
    var sessionId ='\n';
    var token = '\n';
    var caseId = CaseIDNumber + '\n';
    var url = casewebUrl+'\n';
    var uri = sessionId + token + caseId + url;//data in file
    var fileName = "file.i4cvf";//any file name with any extension
    if (isIE)
        {
                var fileData = ['\ufeff' + uri];
                var blobObject = new Blob(fileData);
                window.navigator.msSaveOrOpenBlob(blobObject, fileName);
        }
        else //chrome
        {
            window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
             window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
                fs.root.getFile(fileName, { create: true }, function (fileEntry) { 
                    fileEntry.createWriter(function (fileWriter) {
                        var fileData = ['\ufeff' + uri];
                        var blob = new Blob(fileData);
                        fileWriter.addEventListener("writeend", function () {
                            var fileUrl = fileEntry.toURL();
                            var link = document.createElement('a');
                            link.href = fileUrl;
                            link.download = fileName;
                            document.body.appendChild(link);
                            link.click();
                            document.body.removeChild(link);
                        }, false);
                        fileWriter.write(blob);
                    }, function () { });
                }, function () { });
             }, function () { });
        }
    pls aggiungere una spiegazione più dettagliata la tua risposta – stackoverflow.com/help/how-to-answer
    questa risposta è spazzatura

    OriginaleL’autore Sushama Pradhan

  15. -2

    È effettivamente in grado di raggiungere questo obiettivo, in Chrome e FireFox.

    Provare il seguente url, scarica il codice che è stato utilizzato.

    data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==

    OriginaleL’autore Chad Scira

Lascia un commento