servidor - ¿Cómo crear un archivo dinámico+enlace para descargar en Javascript?
javascript descargar archivo automaticamente (3)
Esta pregunta ya tiene una respuesta aquí:
Normalmente, las páginas HTML pueden tener enlaces a documentos (PDF, etc.) que pueden descargarse desde el servidor.
Suponiendo una página web con Javascript, ¿es posible crear dinámicamente un documento de texto (por ejemplo) desde el navegador del usuario y agregar un enlace para descargar este documento sin un viaje de ida y vuelta al servidor (o uno mínimo)?
En otras palabras, el usuario haría clic en un botón, el javascript generaría números de control (por ejemplo) y los colocaría en una estructura. Luego, el javascript (JQuery por ejemplo) agregaría un enlace a la página para descargar el resultado como un archivo de texto desde la estructura.
Este objetivo es mantener toda la carga de trabajo (o al menos la mayoría) del lado del usuario.
¿Es esto factible, si es así, cómo?
¿Un archivo PDF? No. Un archivo de texto. Sí. Con la reciente HTML5 blob URIs. Una forma muy básica de tu código se vería así:
window.URL = window.webkitURL || window.URL;
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
var file = new window.BlobBuilder(),
number = Math.random().toString(); //In the append method next, it has to be a string
file.append(number); //Your random number is put in the file
var a = document.createElement(''a'');
a.href = window.URL.createObjectURL(file.getBlob(''text/plain''));
a.download = ''filename.txt'';
a.textContent = ''Download file!'';
document.body.appendChild(a);
Puede usar los otros métodos mencionados en las otras respuestas como una alternativa, ya que BlobBuilder probablemente no sea muy compatible .
Nota: BlobBuilder parece estar en desuso. Consulte esta respuesta para ver cómo usar Blob lugar de BlobBuilder . Gracias a @limonte por los heads up.
Al agregar un URI de datos a la página, puede incrustar un documento dentro de la página que se puede descargar. La porción de datos de la cadena se puede concatenar dinámicamente usando Javascript. Puede elegir formatearlo como una cadena codificada en URL o como codificada en base64. Cuando está codificado en base64, el navegador descargará los contenidos como un archivo. Deberá agregar un script o un complemento jQuery para realizar la codificación. Aquí hay un ejemplo con datos estáticos:
jQuery(''body'').prepend(jQuery(''<a/>'').attr(''href'',''data:text/octet-stream;base64,SGVsbG8gV29ybGQh'').text(''Click to download''))
Aquí hay una solución que he creado, que le permite crear y descargar un archivo con un solo clic :
<html>
<body>
<button onclick=''download_file("my_file.txt", dynamic_text())''>Download</button>
<script>
function dynamic_text() {
return "create your dynamic text here";
}
function download_file(name, contents, mime_type) {
mime_type = mime_type || "text/plain";
var blob = new Blob([contents], {type: mime_type});
var dlink = document.createElement(''a'');
dlink.download = name;
dlink.href = window.URL.createObjectURL(blob);
dlink.onclick = function(e) {
// revokeObjectURL needs a delay to work properly
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
</script>
</body>
</html>
Lo creé adaptando el código de esta demostración HTML5 y jugando con las cosas hasta que funcionó, así que estoy seguro de que hay problemas con él (¡comenta o edita si tienes mejoras!) Pero es una solución que funciona con un solo clic. .
(Al menos, me funciona en la última versión de Chrome en Windows 7)