Cómo descargar un archivo usando JavaScript/jQuery?
Ejemplo 1: Uso de vainilla JS y etiqueta
Para este ejemplo, la parte del script se escribiría en JavaScript normal, y un botón presiona haría que la máquina del cliente descargue el archivo previsto.
Paso 1: Configure el documento HTML
Comience por crear un nuevo documento HTML llamado "Inicio" y luego agregue las siguientes líneas dentro de ese documento HTML:
Haga clic en el botón de abajo para descargar el archivo!
Agregar las líneas anteriores dentro del La etiqueta del elemento HTML daría como resultado el siguiente resultado dentro del navegador:
De las líneas que se han agregado al documento HTML, se puede notar fácilmente que el "al hacer clic" La propiedad del botón se ha establecido en la función "descargar archivo()". Creemos esa función en el siguiente paso
Paso 2: Parte de JavaScript
Ya sea dentro del etiqueta de guión o en el archivo JavaScript vinculado, agregue las siguientes líneas de código para agregar la funcionalidad al botón:
Aquí, la ventana.ubicación.La propiedad HREF se ha establecido en la ruta del archivo que debe descargar la máquina del cliente. Dado que solo el nombre del archivo se ha utilizado como ruta al archivo, esto significa que el archivo se coloca dentro de la misma carpeta que el documento HTML:
De todos modos, esto haría que el navegador descargue el archivo.
Paso 3: Pruebas
Al final, active el documento HTML y haga clic en el botón y observe que el navegador comenzará a descargar instantáneamente el archivo como:
Como está claro en el GIF anterior que toda la página web funciona perfectamente según lo previsto.
Ejemplo 2: Uso de jQuery y etiqueta
Para este ejemplo, la parte del script se escribiría en jQuery y un El enlace de la etiqueta haría que el navegador inicie la descarga del archivo previsto.
Paso 1: Configurar el documento HTML
Al igual que el primer ejemplo, cree un nuevo documento HTML llamado "Inicio" y luego agregue las siguientes líneas dentro de ese documento HTML:
Haga clic en el botón de abajo para descargar el archivo!
Haga clic aquí!
Ahora, en este ejemplo, un La etiqueta con la identificación "descargar" se está utilizando en lugar de un botón. Ejecutar este documento HTML generará los siguientes resultados en la página web:
Lo siguiente es agregar un poco de jQuery para descargar el archivo cada vez que se hace clic en el enlace.
Paso 2: código jQuery
En la etiqueta de script o en el archivo de script, agregue las siguientes líneas:
$ (documento).Ready (function ()$ ("#descargar").hacer clic (función (e)
mi.prevenDefault ();
ventana.ubicación.href = "demostración.docx ";
);
);
En las líneas anteriores:
- Se llama a una función una vez que el documento está completamente listo
- Dentro de esa función, se ha aplicado una verificación constante en el elemento con el ID "descargar" que en realidad es el etiqueta y el cheque es de un evento de "clic"
- Después de eso, simplemente acceda a la ubicación.atributo href a la ruta del archivo.
Paso 3: Pruebas
Encuentre el documento HTML y haga clic en el enlace y observe la respuesta de los resultados como esta:
El enlace que se puede hacer clic está causando que la máquina del cliente descargue el archivo previsto con jQuery
Envolver
Para usar JavaScript o jQuery para hacer que la máquina del cliente descargue un archivo específico, simplemente acceda al atributo HREF de la propiedad de ubicación del objeto de ventana y configúrela igual a la ruta completa del archivo en el servidor. Al usar de esta manera, es fácil crear un botón que hará que el archivo se descargue. Y también, un enlace que se puede hacer clic para hacer que el archivo se descargue. De todos modos, el procedimiento se ha explicado a fondo en los ejemplos anteriores.