Hvordan laste ned en fil ved hjelp av JavaScript

JavaScript består av et knippe innebygde funksjoner, metoder og egenskaper for å oppfylle brukerens så vel som utviklerens krav. Filnedlasting er en nyttig oppgave i hvilken som helst nettleser for å utløse en fil og laste den ned. JavaScript lar deg laste ned hvilken som helst fil fra Internett. Dette innlegget demonstrerer forskjellige eksempler på å laste ned en fil ved hjelp av JavaScript.

• Hvordan laste ned en fil i JavaScript
• Eksempel 1: Last ned en fil fra Internett
• Eksempel 2: Opprette og laste ned en tekstfil

Hvordan laste ned en fil i JavaScript?

JavaScript gir et href Attributt for nedlasting av en fil. Attributtet støttes av HTML 5. Ved hjelp av denne attributtet kan brukere bruke lenke samt knapp for nedlasting av filer i henhold til deres behov. To eksempler blir forklart i detalj for å laste ned tekst så vel som bildefiler i JavaScript.

Eksempel 1: Last ned en fil fra Internett

Et eksempel er tilpasset for å laste ned en Jpg fil ved å bruke en hyperkobling i JavaScript. Kodestykket er delt inn i to filer som er navngitt Html og JavaScript.

HTML -kode

<H2> Et eksempel for å laste ned JPG -filenH2>

Vennligst klikk på lenken nedenfor

Last ned lenke

I dette kodestykket,

• For det første er alt manuset skrevet innenfor Merkelapper for middelsjustering.
• Etter det, et anker Tag brukes til å gi en lenke som heter “Last ned lenke.”
  Til slutt en bildefil som heter “Remotar-Jobs.JPG ” lastes ned ved å trykke på “Last ned lenke”

JavaScript -kode

// Opprett en lenke
const download = (p, f) =>
const anker = dokument.CreateElement ('A');
anker.href = p;
anker.Last ned = f;
dokument.kropp.vedlegg (anker);
anker.klikk ();
dokument.kropp.fjerne (anker);
;

Beskrivelsen av JavaScript -koden er skrevet nedenfor:

• De nedlasting Attributt brukes ved å bestå to argumenter, p og
• Etter det en anker Det opprettes objekt som er tilknyttet HTML -filen ved å passere "en"
• Argumentet p Angir plasseringen av filen som er tilknyttet href
• Videre er det andre argumentet f refererer til navnet på den nedlastede filen.
• i tillegg vedlegg Eiendom brukes til å utløse anker
• Til slutt Fjerning Eiendom brukes til å fjerne hendelsen som er opprettet av Klikk ().

Produksjon

Utgangen returnerer en melding med en “Last ned lenke ”. Etter å ha trykket på en lenke, lastes en bildefil i JPG -format.

Eksempel 2: Opprette og laste ned en tekstfil

Et annet eksempel vurderes for å laste ned en tekst fil i JavaScript. I dette eksemplet, en knapp er knyttet til nedlasting av en tekst fil. Her viser eksemplet at brukeren kan legge inn tekst i en tekstboks, og teksten vil bli lastet ned til en tekstfil. Navnet på den nedlastede filen er "JavaScript.tekst". Den komplette koden er skrevet i en HTML -fil.

HTML -kode

Et eksempel for å laste ned tekstfil

Vennligst klikk på lenken nedenfor

Velkommen til JavaScript

Kodebeskrivelsen er diskutert nedenfor:

• Et tekstområde er spesifisert ved hjelp av Tagger der brukeren kan endre data for nedlasting.
• EN “Last ned knapp” er vedlagt for å laste ned en fil.

JavaScript

dokument.GetElementById ("DWN-BTN").AddEventListener ("Klikk", funksjon ()
var t = dokument.GetElementById ("Val").verdi;
var fn = "JavaScript.tekst";
dwn (fn, t);
, falsk);
funksjon dwn (fn, t)
var element = dokument.CreateElement ('A');
element.setAttribute ('href', 'data: tekst/vanlig; charset = utf-8,' + kodeuricomponent (t));
element.setAttribute ('nedlasting', fn);
element.stil.display = 'ingen';
dokument.kropp.appendchild (element);
element.klikk ();
dokument.kropp.fjerne (elementet);

Koden blir forklart som:

• En eiendom AddEventListener er ansatt for å utløse a funksjon() ved å passere Klikk verdien av knappen.
• En metode dwn brukes til å laste ned en fil ved å bestå fn og t
• De setAttribute brukes til å stille inn href og nedlasting attributter.
• De vedlegg Eiendom er ansatt for å legge til elementer.
• Etter det, Klikk () Metoden brukes på elementet.
• Til slutt Fjerning () Metoden fjerner barneelementene.

Produksjon

Utgangen viser et tekstområde der meldingen “Velkommen til JavaScript ” er skrevet. Etter å ha trykket på “Last ned knappen ”, tekstfilen som heter “JavaScript.tekst" lastes ned, inneholder meldingen i den.

Konklusjon

De href Attributt brukes til å laste ned en fil ved å utløse en hendelse i JavaScript. Basert på href attributt, to eksempler blir praktisk talt implementert for nedlasting bilde og tekst filer. I det første eksemplet, en hyperkobling er knyttet til å laste ned en bilde fil, mens du er i det andre eksemplet, a knapp er ansatt for nedlasting av en tekst fil. I denne guiden har du lært JavaScripts attributter for nedlasting av en fil.