javascript - download html
¿Hay alguna forma de especificar un nombre de archivo sugerido al usar datos: URI? (16)
Si por ejemplo sigues el enlace:
data:application/octet-stream;base64,SGVsbG8=
El navegador le pedirá que descargue un archivo que consiste en los datos almacenados 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?
Éste funciona con Firefox 43.0 (más antiguo 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 el archivo en lugar de Blob .
referencia: https://developer.mozilla.org/de/docs/Web/API/File
Aquí hay una versión de 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 opción mejor, estoy totalmente a favor.
var exportFileName = "export-" + filename;
$(''<a></a>'', {
"download": exportFileName,
"href": "data:," + JSON.stringify(exportData, null,5),
"id": "exportDataID"
}).appendTo("body")[0].click().remove();
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();
}
El siguiente fragmento de código Javascript funciona en Chrome utilizando el nuevo atributo de descarga 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")
Es un poco raro, pero he estado en la misma situación antes. Estaba generando dinámicamente un archivo de texto en javascript y quería proporcionarlo para descargar codificándolo con el URI de datos.
Esto es posible con una pequeña intervención del usuario. Genere un enlace <a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a> . Como dije, esto es poco elegante, pero funciona si no necesita una solución profesional.
Esto podría hacerse menos doloroso usando flash para copiar el nombre en el portapapeles primero. Por supuesto, si te permites usar Flash o Java (¿ahora con menos y menos soporte para el navegador, creo?), Es probable que encuentres otra forma de hacerlo.
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 en él, lo envía y luego lo elimina de nuevo. 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.
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
rfc no especifica ningún nombre de archivo y, al menos, Firefox no maneja ningún nombre de archivo, el código genera un nombre aleatorio más ".part"
También he comprobado 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 mirar 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 download atributo de download , también funciona en firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download
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):data: text / plain; charset = utf-8; headers = Content-Disposition% 3A% 20attachment% 3B% 20filename% 3D% 22with% 20spaces.txt% 22% 0D% 0Content-Language% 3A% 20en; base64,4oiaDQo% 3D
También hay alguna información en los demás mensajes de la discusión.
No.
Todo el propósito es que es un flujo de datos, no un archivo. El origen de datos no debe tener ningún conocimiento del agente de usuario que lo maneja como un archivo ... y no lo tiene.
Realmente puedes lograr esto, en Chrome y FireFox.
Pruebe la siguiente url, se descargará el código que se utilizó.
data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==
Según RFC 2397 , no, no hay.
Tampoco parece haber ningún attribute del elemento <a> que puedas usar tampoco.
Sin embargo, HTML5 ha introducido posteriormente el atributo de download en el elemento <a> , aunque en el momento de escribir, el soporte no es universal (no es compatible con MSIE, por ejemplo)
Usando trabajadores de servicio , esto es finalmente posible en el sentido más verdadero.
- Crea una URL falsa. Por ejemplo /saveAs/myPrettyName.jpg
- Use la URL en
<a href, <img src, window.open (url), absolutamente cualquier cosa que se pueda hacer con una URL "real". - Dentro del trabajador, capture el evento fetch 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 );
}
});
Utilice el atributo de download :
<a download=''FileName'' href=''your_url''>
Ejemplo en vivo en html5-demos.appspot.com/...
Actualmente funciona en Chrome, Firefox, Edge, Opera, pero no en Safari 10 o IE11.
puede agregar un atributo de descarga al elemento de anclaje.
muestra:
<a download="abcd.cer"
href="data:application/stream;base64,MIIDhTC......">down</a>
Solo HTML: use el atributo de download :
<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+ utilizarán el nombre de archivo especificado.
IE11, Edge 12 y Safari 9 (que http://caniuse.com/#feat=download ) 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, audio archivos, ...
Si necesita una mejor compatibilidad ahora , use la versión de Downloadify basada en Flash como alternativa.
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 () { });
}