Come scaricare un file usando JavaScript

JavaScript comprende un fascio di caratteristiche, metodi e proprietà integrati per soddisfare le esigenze dell'utente e dello sviluppatore. Il download del file è un'attività utile in qualsiasi browser per attivare un file e scaricarlo. JavaScript ti consente di scaricare qualsiasi file da Internet. Questo post dimostra vari esempi di download di un file utilizzando JavaScript.

• Come scaricare un file in javascript
• Esempio 1: scaricare un file da Internet
• Esempio 2: creazione e download di un file di testo

Come scaricare un file in javascript?

JavaScript fornisce un Href attributo per il download di un file. L'attributo è supportato da HTML 5. Utilizzando questo attributo, gli utenti possono utilizzare il collegamento così come il pulsante per scaricare file in base alle loro esigenze. Due esempi sono spiegati in dettaglio per scaricare il testo e i file di immagini in JavaScript.

Esempio 1: scaricare un file da Internet

Un esempio è adattato per scaricare un Jpg file utilizzando un collegamento ipertestuale in JavaScript. Il pezzo di codice è diviso in due file denominati Html E JavaScript.

Codice HTML

<H2> Un esempio per scaricare il file jpgH2>

Fare clic sul link in basso

Link per scaricare

In questo pezzo di codice,

• In primo luogo, tutta la sceneggiatura è scritta all'interno Tag per l'allineamento centrale.
• Dopodiché, un'ancora Il tag viene utilizzato per fornire un link chiamato "Link per scaricare."
  Infine, un file di immagine chiamato "jobs remotar.jpg " viene scaricato premendo il "Link per scaricare"

Codice JavaScript

// Crea un link
const download = (p, f) =>
const anchor = document.createElement ('a');
ancora.href = p;
ancora.download = f;
documento.corpo.AppendChild (ancoraggio);
ancora.clic();
documento.corpo.REMOVECHILD (ancoraggio);
;

La descrizione del codice JavaScript è scritta di seguito:

• IL scaricamento L'attributo viene utilizzato passando due argomenti, P E
• Dopodiché, un ancora L'oggetto viene creato associato al file HTML passando "UN"
• L'argomento P Specifica la posizione del file associato al Href
• Inoltre, l'altro argomento F si riferisce al nome del file scaricato.
• Inoltre, il AppendChild la proprietà viene utilizzata per attivare il ancora
• Finalmente il Rimuovi la proprietà viene utilizzata per rimuovere l'evento creato da clic().

Produzione

L'output restituisce un messaggio con "Link per scaricare". Dopo aver premuto un collegamento, viene scaricato un file di immagine in formato JPG.

Esempio 2: creazione e download di un file di testo

Un altro esempio è considerato per il download a testo File in JavaScript. In questo esempio, a pulsante è allegato per scaricare un file testo file. Qui, l'esempio dimostra che l'utente può inserire il testo in una casella di testo e il testo verrà scaricato in un file di testo. Il nome del file scaricato è "JavaScript.TXT". Il codice completo è scritto in un file HTML.

Codice HTML

Un esempio per scaricare il file di testo

Fare clic sul link in basso

Benvenuti in JavaScript

La descrizione del codice è discussa di seguito:

• Un'area di testo è specificata utilizzando il Tag in cui l'utente può modificare i dati per il download.
• UN "Pulsante di download" è allegato per scaricare un file.

JavaScript

documento.getElementById ("DWN-BTN").addEventListener ("click", function ()
var t = documento.getElementById ("Val").valore;
var fn = "javascript.TXT";
dwn (fn, t);
, false);
funzione dwn (fn, t)
var element = document.createElement ('a');
elemento.setAttribute ('Href', 'Data: text/Plain; chatset = UTF-8,' + encodeuricomponent (t));
elemento.setAttribute ('download', fn);
elemento.stile.Display = 'Nessuno';
documento.corpo.appendChild (elemento);
elemento.clic();
documento.corpo.removechild (elemento);

Il codice è spiegato come:

• Una proprietà addEventlistener è impiegato per attivare a funzione() passando il clic valore del pulsante.
• Un metodo DWN viene utilizzato per scaricare un file passando fn E T
• IL setAttribute viene utilizzato per impostare il Href E scaricamento attributi.
• IL AppendChild La proprietà è impiegata per aggiungere elementi.
• Dopodiché, il clic() Il metodo viene applicato all'elemento.
• Infine, il removechild () Il metodo rimuove gli elementi del bambino.

Produzione

L'output visualizza un'area di testo in cui il messaggio "Benvenuti a JavaScript " è scritto. Dopo aver premuto il "Pulsante di download ", il file di testo denominato “JavaScript.TXT" viene scaricato, contenente il messaggio in esso.

Conclusione

IL Href L'attributo viene utilizzato per scaricare un file innescando un evento in JavaScript. Basato sul Href attributo, due esempi sono praticamente implementati per il download Immagine E testo File. Nel primo esempio, a collegamento ipertestuale è allegato per scaricare un Immagine file, mentre nel secondo esempio, a pulsante è impiegato per il download a testo file. In questa guida, hai imparato gli attributi di JavaScript per il download di un file.