Tengo un requisito muy similar especificado aquí .
Necesito que el navegador del usuario inicie una descarga manualmente cuando $('a#someID').click();
Pero no puedo usar el window.href
método, ya que reemplaza el contenido actual de la página con el archivo que está intentando descargar.
En cambio, quiero abrir la descarga en una nueva ventana / pestaña. ¿Cómo es esto posible?
javascript
jquery
download
Mithun Sreedharan
fuente
fuente
Respuestas:
Usa un invisible
<iframe>
:Para forzar al navegador a descargar un archivo que de otro modo sería capaz de procesar (como archivos HTML o de texto), necesita que el servidor configure el Tipo MIME del archivo en un valor sin sentido, como
application/x-please-download-me
o alternativamenteapplication/octet-stream
, que se utiliza para binarios arbitrarios datos.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
atributo establecido en_blank
.En jQuery:
Cada vez que se hace clic en ese enlace, descargará el archivo en una nueva pestaña / ventana.
fuente
iframe.style.display = 'none';
ya que esto ocultará completamente el iframe. Su implementación actual hará que el iframe sea invisible, pero el iframe aún ocupará espacio en la parte inferior de la página y causará espacio en blanco adicional.Content-Disposition: attachment; filename="downloaded.pdf"
(por supuesto, puede personalizar el nombre de archivo según lo necesite).Actualización de navegadores modernos 2019
Este es el enfoque que ahora recomendaría con algunas advertencias:
Enfoque basado en jQuery / iframe / cookie original de 2012
He creado el complemento de descarga de archivos jQuery ( Demo ) ( GitHub ) que también podría ayudar con su situación. Funciona de manera bastante similar con un iframe, pero tiene algunas características interesantes que he encontrado bastante útiles:
Muy fácil de configurar con imágenes agradables (jQuery UI Dialog, pero no es obligatorio), todo se prueba también
El usuario nunca abandona 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 el usuario ve en cualquier situación
En conjunción con jQuery UI, un desarrollador puede mostrar fácilmente un modal diciéndole al usuario que se está produciendo una descarga de archivos, disolver el modal después de que comience la descarga o incluso informar al usuario de manera amigable de que se ha producido un error. Vea 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 usando la fuente del complemento con promesas. La página de demostración también incluye muchos otros ejemplos de 'mejor UX'.
fuente
Compruebe si su (s) navegador (es) de destino ejecutarán el fragmento anterior sin problemas:
http://caniuse.com/#feat=download
fuente
document.body.appendChild(link)
antes del clic y después del clic que puedes hacerlink.remove()
para evitar contaminar el DOM.link.download = ""
que conserve su nombre de archivo original y evitar tener que configurar uno.Me sorprende que no mucha gente sepa sobre el atributo de descarga de un elemento. Por favor, ayuda a correr la voz al respecto! Puede tener un enlace html oculto y simular un clic en él. Si el enlace html tiene el atributo de descarga, descarga el archivo, no lo ve, pase lo que pase. Aquí está el código. Descargará una imagen de gato si puede encontrarla.
Nota: Esto no es compatible con todos los navegadores: http://www.w3schools.com/tags/att_a_download.asp
fuente
mp4
sRecomiendo usar el
download
atributo para descargar en lugar de jQuery:Esto descargará su archivo, sin abrirlo.
fuente
Si ya está usando jQuery, podría aprovecharlo para producir un fragmento más pequeño.
Una versión jQuery de la respuesta de Andrew:
fuente
if
declaración realmente debería ser:if( $idown && $idown.length > 0 )
Funciona en Chrome, Firefox e IE8 y superior.
fuente
url
, no se descargará.Ejemplo simple usando un
iframe
Luego simplemente llame a la función donde quiera:
downloadURL('path/to/my/file');
fuente
Esto podría ser útil si no necesita navegar en otra página. Esta es la función base de JavaScript, por lo que se puede usar en cualquier plataforma donde el backend esté en Javascript
fuente
Solo siete años después, aquí viene una solución jQuery de una línea que usa un formulario en lugar de un iframe o enlace:
He probado esto en
Si alguien conoce algún inconveniente con esta solución, me alegraría saber de ellos.
Demo completa:
fuente
filePath
tiene una cadena de consulta, ya que enviar un formulario sobrescribirá la cadena de consulta en el atributo de acción.var authInput = $("<input>").attr("type", "hidden").attr("name", "myQsKey").val('MyQsValue');
$('<form></form>') .attr('action', filePath) .append($(authInput)) .appendTo('body').submit().remove();
Esto es un acceso equivalente:filepath?myQsKey=myValue
window.location
afilePath
. Solowindow.location = filePath;
haría lo mismo.download
atributo de esta manera para decirle al navegador que desea una descarga, independientemente de los encabezados que devuelva el servidor, lo que puede hacer con una
elemento).No sé si la pregunta es demasiado antigua, pero establecer window.location en una URL de descarga funcionará, siempre que el tipo de mime de descarga sea correcto (por ejemplo, un archivo zip).
fuente
Terminé usando el fragmento de abajo y funciona en la mayoría de los navegadores, aunque no probado en IE.
Actualizar
fuente
MouseEvent
aquí en lugar de usar siempreclick
? ¿Y por qué agregar el enlace al documento antes de hacer clic en él? Tal vez esto tiene ventajas sobre el enfoque más simple que se muestra en stackoverflow.com/a/23013574/1709587 , pero si es así, no se explican aquí.Para mejorar la respuesta de Imagine Breaker, esto es compatible con FF e IE:
En otras palabras, simplemente use una
dispatchEvent
función en lugar declick()
;fuente
Tal vez solo haga que su JavaScript abra una página que solo descarga un archivo, como cuando arrastra un enlace de descarga a una nueva pestaña:
Con la ventana abierta, abra una página de descarga que se cierra automáticamente.
fuente
A continuación se encuentra el código más completo y funcional (probado) para descargar datos para Firefox, Chrome e IE Code. Supongamos que los datos están en texarea campo, que tiene id = 'textarea_area' y el nombre de archivo es el nombre del archivo donde se pueden descargar los datos.
y luego solo llama
Para descargar Iniciando.
La matriz para configurar el tipo MIME correcto para el diálogo de descarga PUEDE SER siguiente:
fuente
para mí esto está funcionando bien probado en Chrome v72
fuente
He tenido buenos resultados con el uso de una etiqueta FORM ya que funciona en todas partes y no tiene que crear archivos temporales en el servidor. El método funciona así.
En el lado del cliente (página HTML), crea un formulario invisible como este
Luego agrega este código Javascript a su botón:
En el lado del servidor tiene el siguiente código PHP
download.php
:Incluso puede crear archivos zip de sus datos de esta manera:
¡La mejor parte es que no deja ningún archivo residual en su servidor ya que todo se crea y destruye sobre la marcha!
fuente
La respuesta presentada por hitesh el 30 de diciembre de 2013 sí funciona. Solo requiere un poco de ajuste:
El archivo PHP puede llamarse a sí mismo. En otras palabras, simplemente cree un archivo llamado saveAs.php y coloque este código en él ...
fuente
Estas funciones se usan en stacktrace.js :
fuente
Le sugiero que use el evento mousedown, que se llama ANTES del evento click. De esa manera, el navegador maneja el evento click de forma natural, lo que evita cualquier rareza en el código:
fuente
Excelente solución de Corbacho, me acabo de adaptar para deshacerme de la var
fuente
Firefox y Chrome probados:
Esta es en realidad la solución "Chrome" para Firefox (no lo he probado en otros navegadores, así que por favor deje comentarios sobre la compatibilidad)
fuente
Hay tantas cosas pequeñas que pueden suceder al intentar descargar un archivo. La inconsistencia entre los navegadores solo es una pesadilla. Terminé usando esta pequeña biblioteca genial. https://github.com/rndme/download
Lo bueno de esto es que es flexible no solo para las URL sino también para los datos del lado del cliente que desea descargar.
fuente
Usando la etiqueta de anclaje y PHP se puede hacer, verifique esta respuesta
Llamada de JQuery Ajax para descargar archivos PDF
Estoy verificando el tamaño del archivo porque si carga el PDF desde CDN cloudfront, no obtendrá el tamaño del documento que obliga a que el documento se descargue en 0kb. Para evitar esto, estoy verificando con esta condición
fuente
Sé que llego tarde a la fiesta, pero me gustaría compartir mi solución, que es una variación de la solución de Imagine Breaker anterior. Traté de usar su solución, porque su solución me parece más simple y fácil. Pero como dijo otro, no funcionó para algunos navegadores, así que puse alguna variación al usar jquery.
Espero que esto pueda ayudar a alguien por ahí.
fuente
window.location.href = url
. El enlace que creas no se usa para nada.Nota: No es compatible con todos los navegadores.
Estaba buscando una manera de descargar un archivo usando jquery sin tener que configurar la url del archivo en el atributo href desde el principio.
fuente
Uso la solución de @ rakaloof sin JQuery (porque no la necesitas aquí ). ¡Gracias por la idea! Aquí hay una solución basada en formularios de vanillaJS:
fuente