¿Hay alguna forma de especificar un nombre de archivo sugerido cuando se usan datos: URI?

Si por ejemplo sigues el enlace:

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

El navegador le pedirá que descargue un archivo que consta de los datos que se mantienen como base64 en el propio hipervínculo. ¿Hay alguna forma de sugerir un nombre predeterminado en el marcado? Si no, ¿hay una solución de JavaScript?

Usa el downloadatributo:

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

Ejemplo vivo por html5-demos.appspot.com / ... .

Actualmente funciona en Chrome, Firefox, Edge, Opera y Safari de escritorio, pero no iOS Safari o IE11.

Chrome hace esto muy simple en estos días:

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

Solo HTML: use el downloadatributo:

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

Solo Javascript: puede guardar cualquier URI de datos con este código:

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 y Edge 13+ usarán el nombre de archivo especificado.

IE11, Edge 12 y Safari 9 (que no admiten el downloadatributo ) descargarán el archivo con su nombre predeterminado o simplemente lo mostrarán en una nueva pestaña, si es de un tipo de archivo compatible: imágenes, videos, archivos de audio , ...

Según RFC 2397 , no, no lo hay.

Tampoco parece haber ningún atributo del <a>elemento que pueda usar.

Sin embargo, HTML5 ha introducido posteriormente el downloadatributo en el <a>elemento, aunque en el momento de la escritura, el soporte no es universal (no hay soporte de MSIE, por ejemplo)

He buscado un poco en las fuentes de Firefox en netwerk / protocol / data / nsDataHandler.cpp

el manejador de datos solo analiza el contenido / tipo y el conjunto de caracteres, y busca si hay "; base64" en la cadena

el rfc no especifica nombre de archivo y al menos firefox no maneja ningún nombre de archivo para él, el código genera un nombre aleatorio más ".part"

También revisé el registro de 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

archivos interesantes si quieres ver las fuentes de 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

Creo que puedes dejar de buscar una solución por ahora, porque sospecho que no hay ninguna :)

como se observó en este hilo, html5 tiene downloadatributo, también funciona en firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

El siguiente fragmento de Javascript funciona en Chrome mediante el uso del nuevo atributo 'descargar' de enlaces y simulando un clic.

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

Y el siguiente ejemplo muestra su uso:

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

No.

El objetivo es que sea un flujo de datos, no un archivo. La fuente de datos no debe tener ningún conocimiento del agente de usuario que lo maneja como un archivo ... y no lo hace.

puede agregar un atributo de descarga al elemento de anclaje.

muestra:

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

Mire este enlace: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

Citar:

Incluso funciona (como en, no causa un problema) con; base64 al final
así (al menos en Opera):

datos: 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

También hay algo de información en los mensajes restantes de la discusión.

Utilizando trabajadores de servicio , esto finalmente es posible en el sentido más verdadero.

1. Crea una URL falsa. Por ejemplo /saveAs/myPrettyName.jpg
2. Use URL en <a href, <img src, window.open (url), absolutamente cualquier cosa que pueda hacerse con una URL "real".
3. Dentro del trabajador, capture el evento de búsqueda y responda con los datos correctos.

El navegador ahora sugerirá myPrettyName.jpg incluso si el usuario abre el archivo en una nueva pestaña e intenta guardarlo allí. Será exactamente como si el archivo hubiera venido del servidor.

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

Hay un pequeño script de solución en Google Code que funcionó para mí:

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

Agrega un formulario con los datos, lo envía y luego elimina el formulario nuevamente. Hacky, pero hizo el trabajo por mí. Requiere jQuery.

Este hilo apareció en Google antes de la página de Google Code y pensé que podría ser útil tener el enlace aquí también.

Aquí hay una versión jQuery basada en la versión de Holf y funciona con Chrome y Firefox, mientras que su versión parece funcionar solo con Chrome. Es un poco extraño agregar algo al cuerpo para hacer esto, pero si alguien tiene una mejor opción, estoy a favor.

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

Es un poco hack, pero he estado en la misma situación antes. Estaba generando dinámicamente un archivo de texto en javascript y quería proporcionarlo para su descarga codificándolo con el URI de datos.

Esto es posible con una intervención menor del usuario mayor. Genera un enlace <a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>. Como dije, esto no es elegante, pero funciona si no necesita una solución profesional.

Esto podría hacerse menos doloroso al usar flash para copiar primero el nombre en el portapapeles. Por supuesto, si te permites usar Flash o Java (¿creo que ahora con menos soporte para el navegador?), Probablemente puedas encontrar otra forma de hacerlo.

Este funciona con Firefox 43.0 (anterior no probado):

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>

Si se hace clic en el botón, se ofrece un archivo llamado hello.bin para descargar. El truco es usar Archivo en lugar de Blob .

referencia: 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 () { });
    }

De hecho, puede lograr esto, en Chrome y Firefox.

Pruebe la siguiente URL, descargará el código que se utilizó.

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==