Cómo descargar un archivo usando JavaScript

JavaScript comprende un paquete de características, métodos y propiedades incorporadas para cumplir con las demandas del usuario y del desarrollador. La descarga de archivos es una tarea útil en cualquier navegador para activar un archivo y descargarlo. JavaScript le permite descargar cualquier archivo desde Internet. Esta publicación demuestra varios ejemplos de descarga de un archivo usando JavaScript.

• Cómo descargar un archivo en JavaScript
• Ejemplo 1: Descargar un archivo de Internet
• Ejemplo 2: Creación y descarga de un archivo de texto

Cómo descargar un archivo en JavaScript?

JavaScript proporciona un href atributo para descargar un archivo. El atributo es compatible con HTML 5. Usando este atributo, los usuarios pueden emplear el enlace así como el botón para descargar archivos de acuerdo con sus necesidades. Dos ejemplos se explican en detalle para descargar texto, así como archivos de imagen en JavaScript.

Ejemplo 1: Descargar un archivo de Internet

Un ejemplo está adaptado para descargar un JPG Archivo utilizando un hipervínculo en JavaScript. El código de código se divide en dos archivos nombrados Html y Javascript.

código HTML

<H2> Un ejemplo para descargar el archivo jpgH2>

Haga clic en el enlace a continuación

Enlace de descarga

En este código,

• En primer lugar, todo el guión está escrito dentro Etiquetas para alineación central.
• Después de eso, un ancla La etiqueta se utiliza para proporcionar un enlace llamado "Enlace de descarga."
  Finalmente, un archivo de imagen llamado "remoto.JPG " se descarga presionando el "Enlace de descarga"

Código JavaScript

// Crear un enlace
const descargar = (p, f) =>
Const Anchor = Documento.createElement ('a');
ancla.href = p;
ancla.descargar = f;
documento.cuerpo.appendchild (ancla);
ancla.hacer clic();
documento.cuerpo.Removechild (ancla);
;

La descripción del código JavaScript se escribe a continuación:

• El descargar El atributo se utiliza pasando dos argumentos, pag y
• Después de eso, un ancla Se crea el objeto que está asociado con el archivo HTML al pasar el "a"
• El argumento pag Especifica la ubicación del archivo asociado con el href
• Además, el otro argumento F se refiere al nombre del archivo descargado.
• además, el añadir Niño la propiedad se utiliza para activar el ancla
• Finalmente, el retirarse la propiedad se utiliza para eliminar el evento creado por el hacer clic().

Producción

La salida devuelve un mensaje con un "Enlace de descarga". Después de presionar un enlace, se descarga un archivo de imagen en formato JPG.

Ejemplo 2: Creación y descarga de un archivo de texto

Se considera otro ejemplo para descargar un texto Archivo en JavaScript. En este ejemplo, un botón se adjunta para descargar un texto archivo. Aquí, el ejemplo demuestra que el usuario puede ingresar texto en un cuadro de texto, y el texto se descargará en un archivo de texto. El nombre del archivo descargado es "Javascript.TXT". El código completo está escrito en un archivo HTML.

código HTML

Un ejemplo para descargar archivo de texto

Haga clic en el enlace a continuación

Bienvenido a JavaScript

La descripción del código se discute a continuación:

• Se especifica un área de texto utilizando el etiquetas en las que el usuario puede modificar datos para descargar.
• A "Botón de descarga" se adjunta para descargar un archivo.

Javascript

documento.getElementById ("dwn-btn").addEventListener ("hacer clic", function ()
var t = documento.GetElementById ("Val").valor;
var fn = "javascript.TXT";
dwn (fn, t);
, FALSO);
función dwn (fn, t)
elemento var = documento.createElement ('a');
elemento.setAttribute ('href', 'Data: Text/Plain; Charset = UTF-8,' + CodeRiComponent (t));
elemento.setAttribute ('descargar', fn);
elemento.estilo.display = 'ninguno';
documento.cuerpo.appendChild (elemento);
elemento.hacer clic();
documento.cuerpo.removechild (elemento);

El código se explica como:

• Una propiedad AddEventListener se emplea para activar un función() pasando el hacer clic Valor del botón.
• Un método dwn se usa para descargar un archivo pasando fn y T
• El setattribute se utiliza para establecer el href y descargar atributos.
• El añadir Niño La propiedad se emplea para agregar elementos.
• Después de eso, el hacer clic() El método se aplica al elemento.
• Por último, el removechild () El método elimina los elementos infantiles.

Producción

La salida muestra un área de texto en el que el mensaje "Bienvenido a JavaScript " está escrito. Después de presionar el "Botón de descarga ", el archivo de texto nombrado "JavaScript.TXT" se descarga, que contiene el mensaje en él.

Conclusión

El href El atributo se usa para descargar un archivo activando un evento en JavaScript. Basado en el href atributo, se implementan prácticamente dos ejemplos para descargar imagen y texto archivos. En el primer ejemplo, un Hipervínculo se adjunta para descargar un imagen archivo, mientras que en el segundo ejemplo, un botón se emplea para descargar un texto archivo. En esta guía, ha aprendido los atributos de JavaScript para descargar un archivo.