Esiste un modo per specificare un nome file suggerito quando si utilizzano i dati: URI?

Se ad esempio segui il link:

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

Il browser richiederà di scaricare un file costituito dai dati contenuti come base64 nel collegamento ipertestuale stesso. C'è un modo per suggerire un nome predefinito nel markup? In caso contrario, esiste una soluzione JavaScript?

Usa l' downloadattributo:

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

Esempio in diretta su html5-demos.appspot.com / ... .

Attualmente funziona su Chrome, Firefox, Edge, Opera e Safari desktop ma non iOS Safari o IE11.

Chrome lo rende molto semplice in questi giorni:

function saveContent(fileContents, fileName)
{
    var link = document.createElement('a');
    link.download = fileName;
    link.href = 'data:,' + fileContents;
    link.click();
}

Solo HTML: utilizzare l' downloadattributo:

<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Download transparent png</a>

Solo Javascript: puoi salvare qualsiasi URI di dati con questo codice:

function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);
    
    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

var file = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
saveAs(file, 'logo.gif');

Chrome, Firefox e Edge 13+ utilizzeranno il nome file specificato.

IE11, Edge 12 e Safari 9 (che non supportano l' downloadattributo ) scaricheranno il file con il loro nome predefinito o lo visualizzeranno semplicemente in una nuova scheda, se è di un tipo di file supportato: immagini, video, file audio , ...

Secondo RFC 2397 , no, non esiste.

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

Tuttavia HTML5 ha successivamente introdotto l' downloadattributo <a>sull'elemento, sebbene al momento della stesura il supporto non sia universale (nessun supporto MSIE, ad esempio)

Ho guardato un po 'nelle fonti di Firefox in netwerk / protocol / data / nsDataHandler.cpp

il gestore dati analizza solo contenuto / tipo e set di caratteri e osserva se nella stringa è presente "; base64"

rfc non specifica alcun nome file e almeno firefox non gestisce alcun nome file per esso, il codice genera un nome casuale più ".part"

Ho anche controllato il registro di Firefox

[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

file interessanti se vuoi guardare le fonti di mozilla:

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 tu possa smettere di cercare una soluzione per ora, perché sospetto che non ce ne sia :)

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

Il seguente frammento di Javascript funziona in Chrome utilizzando il nuovo attributo "link" dei collegamenti e simulando un clic.

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

E il seguente esempio mostra il suo utilizzo:

downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")

No.

L'intero scopo è che si tratta di un flusso di dati, non di un file. L'origine dati non dovrebbe avere alcuna conoscenza del programma utente che lo gestisce come file ... e non lo è.

puoi aggiungere un attributo download all'elemento anchor.

campione:

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

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

Citazione:

Funziona anche (come in, non causa problemi) con; base64 alla fine in
questo modo (almeno in Opera):

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

Inoltre ci sono alcune informazioni negli altri messaggi della discussione.

Utilizzando i lavoratori dell'assistenza , questo è finalmente possibile nel vero senso della parola.

1. Crea un URL falso. Ad esempio /saveAs/myPrettyName.jpg
2. Usa URL in <a href, <img src, window.open (url), assolutamente tutto ciò che può essere fatto con un URL "reale".
3. All'interno del lavoratore, cattura l'evento fetch e rispondi con i dati corretti.

Il browser ora suggerirà myPrettyName.jpg anche se l'utente apre il file in una nuova scheda e prova a salvarlo lì. Sarà esattamente come se il file provenisse 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 );
    }
});

C'è un piccolo script di soluzione alternativa su Google Code che ha funzionato per me:

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

Aggiunge un modulo con i dati in esso contenuti, lo invia e quindi lo rimuove nuovamente. Hacky, ma ha fatto il lavoro per me. Richiede jQuery.

Questa discussione è apparsa su Google prima della pagina del codice di Google e ho pensato che potesse essere utile avere anche il link qui.

Ecco una versione jQuery basata sulla versione di Holf e funziona con Chrome e Firefox mentre la sua versione sembra funzionare solo con Chrome. È un po 'strano aggiungere qualcosa al corpo per farlo, ma se qualcuno ha un'opzione migliore, sono tutto per questo.

var exportFileName = "export-" + filename;
$('<a></a>', {
    "download": exportFileName,
    "href": "data:," + JSON.stringify(exportData, null,5),
    "id": "exportDataID"
}).appendTo("body")[0].click().remove();

È un po 'hacker, ma prima mi sono trovato nella stessa situazione. Stavo generando dinamicamente un file di testo in javascript e volevo fornirlo per il download codificandolo con l'URI dei dati.

Ciò è possibile con un minore intervento da parte dell'utente. Genera un collegamento<a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a> . Come ho già detto, questo non è elegante, ma funziona se non hai bisogno di una soluzione professionale.

Ciò potrebbe essere meno doloroso utilizzando Flash per copiare prima il nome negli Appunti. Naturalmente se ti lasci usare Flash o Java (ora con sempre meno supporto per il browser penso?), Probabilmente potresti trovare un altro modo per farlo.

Questo funziona con Firefox 43.0 (vecchio 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 si fa clic sul pulsante, viene offerto un file chiamato hello.bin per il download. Il trucco è usare File invece di BLOB .

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

var isIE = /*@cc_on!@*/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 () { });
    }

In realtà puoi farlo, in Chrome e FireFox.

Prova il seguente URL, scaricherà il codice che è stato utilizzato.

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==