Verificamos de forma profundamente cada una de las secciones de nuestra web con la meta de enseñarte en todo momento la información veraz y actualizada.
Solución:
Usa un invisible
Para obligar al navegador a descargar un archivo que, de otro modo, sería capaz de procesar (como HTML o archivos de texto), necesita que el servidor configure el tipo MIME del archivo en un valor sin sentido, como application/x-please-download-me o alternativamente application/octet-streamque se utiliza para datos binarios arbitrarios.
Si solo desea abrirlo en una nueva pestaña, la única forma de hacerlo es que el usuario haga clic en un enlace con su target attribute ajustado a _blank.
En jQuery:
$('a#someID').attr(target: '_blank',
href : 'http://localhost/directory/file.pdf');
Cada vez que se haga clic en ese enlace, se descargará el archivo en una nueva pestaña/ventana.
Actualización de navegadores modernos 2019
Este es el enfoque que recomendaría ahora con algunas advertencias:
- Se requiere un navegador relativamente moderno
- Si se espera que el archivo sea muy grande probablemente debería hacer algo similar al enfoque original (iframe y cookie) porque algunas de las siguientes operaciones probablemente podrían consumir memoria del sistema al menos tan grande como el archivo que se está descargando u otros efectos secundarios interesantes de la CPU.
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(resp => resp.blob())
.then(blob =>
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
// the filename you want
a.download = 'todo-1.json';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
alert('your file has downloaded!'); // or you know, something with better UX...
)
.catch(() => alert('oh no!'));Enfoque original basado en jQuery/iframe/cookie de 2012
Creé el complemento de descarga de archivos jQuery (demostración) (GitHub) que también podría ayudarlo con su situación. Funciona de manera bastante similar con un iframe, pero tiene algunas características interesantes que he encontrado muy útiles:
-
Muy fácil de configurar con imágenes agradables (jQuery UI Dialog, pero no es obligatorio), todo también se prueba
-
El usuario nunca sale de la misma página desde la que inició la descarga de un archivo. Esta característica se está volviendo crucial para las aplicaciones web modernas.
-
Las funciones SuccessCallback y failCallback le permiten ser explícito sobre lo que ve el usuario en cualquier situación.
-
Junto con jQuery UI, un desarrollador puede mostrar fácilmente un modal que le dice al usuario que se está descargando un archivo, disolver el modal después de que comience la descarga o incluso informar al usuario de manera amigable que se ha producido un error. Consulte la demostración para ver un ejemplo de esto. ¡Espero que esto ayude a alguien!
Aquí hay una demostración de caso de uso simple que usa la fuente del complemento con promesas. La página de demostración también incluye muchos otros ejemplos de ‘mejor UX’.
$.fileDownload('some/file.pdf')
.done(function () alert('File download a success!'); )
.fail(function () alert('File download failed!'); );
function downloadURI(uri, name)
var link = document.createElement("a");
// If you don't know the name or want to use
// the webserver default set name = ''
link.setAttribute('download', name);
link.href = uri;
document.body.appendChild(link);
link.click();
link.remove();
Compruebe si su(s) navegador(es) de destino ejecutarán el fragmento anterior sin problemas:
http://caniuse.com/#feat=descargar
Reseñas y valoraciones
Nos puedes estimular nuestro estudio añadiendo un comentario y dejando una puntuación te damos las gracias.