Hvordan laste ned en fil ved hjelp av JavaScript/jQuery?

JavaScript eller jQuery kan enkelt brukes til å forårsake nedlasting av filer når du trykker på en knapp eller trykker på en tag link. For å gjøre dette, bare bruk "plassering.href ” eiendom til "vindu" objekt og sett den lik banen til filen på serveren, som vil bli lastet ned på klientens maskin. For å forstå dette bedre, følg eksemplene gitt nedenfor.

Eksempel 1: Bruke Vanilla JS og TAG

For dette eksemplet ville skriptdelen bli skrevet i Normal JavaScript, og en knappetrykk ville føre til at klientens maskin laster ned den tiltenkte filen.

Trinn 1: Sett opp HTML -dokumentet

Begynn med å lage et nytt HTML -dokument som heter “Home”, og legg deretter til følgende linjer inne i det HTML -dokumentet:

Klikk på knappen nedenfor for å laste ned filen!

Last ned fil

Legge til linjene ovenfor i Tag av HTML -elementet ville resultere i følgende utfall i nettleseren:

Fra linjene som er lagt til i HTML -dokumentet, kan det lett legges merke til at "ved trykk" Egenskapen til knappen er satt til funksjonen "Last ned fil()". La oss lage den funksjonen i neste trinn

Steg 2: JavaScript -del

Enten innenfor Skriptkode eller i den koblede JavaScript -filen, legg til følgende kodelinjer for å legge til funksjonaliteten til knappen:

Her, vinduet.plassering.Href -egenskapen er satt til banen til filen som skal lastes ned av klientens maskin. Siden bare navnet på filen har blitt brukt som banen til filen, betyr dette at filen er plassert i samme mappe som HTML -dokumentet:

Uansett vil dette føre til at nettleseren laster ned filen.

Trinn 3: Testing

På slutten, fyr opp HTML -dokumentet og klikk på knappen og observere at nettleseren øyeblikkelig vil begynne å laste ned filen som:

Som det er klart fra GIF over at hele websiden fungerer perfekt som tiltenkt.

Eksempel 2: Bruke jQuery og stikkord

For dette eksemplet ville manusdelen bli skrevet i jQuery, og en Tag -lenke vil føre til at nettleseren starter nedlastingen av den tiltenkte filen.

Trinn 1: Sett opp HTML -dokumentet

Akkurat som det første eksemplet, lag et nytt HTML -dokument som heter “Home”, og legg deretter til følgende linjer i det HTML -dokumentet:

Klikk på knappen nedenfor for å laste ned filen!

Klikk her!

Nå, i dette eksemplet, en Tag med ID "nedlasting" brukes i stedet for en knapp. Å kjøre dette HTML -dokumentet vil gi følgende resultater på nettsiden:

Neste opp er å legge til noe jQuery for å laste ned filen hver gang lenken klikker.

Trinn 2: JQuery Code

I skriptet eller i skriptfilen, legg til følgende linjer:

$ (dokument).klar (funksjon ()
$ ("#Last ned").klikk (funksjon (e)
e.PreventDefault ();
vindu.plassering.href = "demo.docx ";
);
);

I linjene ovenfor:

• En funksjon kalles når dokumentet er helt klar
• Innenfor den funksjonen har en konstant sjekk blitt brukt på elementet med ID "nedlasting" som faktisk er stikkord Og sjekken er av en "klikk" -hendelse
• Etter det, bare tilgang til stedet.HREF -attributt til filstien.

Trinn 3: Testing

Fyr opp HTML -dokumentet og klikk på lenken og observer resultatresponsen for å være slik:

Den klikkbar lenken får klientens maskin til å laste ned den tiltenkte filen ved hjelp av jQuery

Pakk opp

For å bruke JavaScript eller JQuery for å få klientens maskin til å laste ned en bestemt fil, kan du bare få tilgang til HREF -attributtet til vinduobjektets plasseringsegenskap og angi den lik den komplette banen til filen på serveren. Ved å bruke denne måten er det enkelt å opprette en knapp som vil føre til at filen blir lastet ned. Og også en klikkbar lenke for å få filen til å laste ned. Uansett har prosedyren blitt forklart grundig i eksemplene ovenfor.