Come scaricare un file utilizzando JavaScript/JQuery?
Esempio 1: usando la vaniglia JS e il tag
Per questo esempio, la parte dello script verrebbe scritta nel normale JavaScript e una pressione del pulsante causerebbe il download della macchina del client il file previsto.
Passaggio 1: impostare il documento HTML
Inizia creando un nuovo documento HTML chiamato "Home", quindi aggiungi le seguenti righe all'interno di quel documento HTML:
Fai clic sul pulsante in basso per scaricare il file!
Aggiungendo le righe sopra all'interno del Il tag dell'elemento HTML comporterebbe il seguente risultato all'interno del browser:
Dalle linee che sono state aggiunte nel documento HTML, si può facilmente notare che il "al clic" La proprietà del pulsante è stata impostata sulla funzione "download file()". Creiamo quella funzione nel passaggio successivo
Passo 2: Parte JavaScript
O all'interno del tag script o nel file JavaScript collegato, aggiungi le seguenti righe di codice per aggiungere la funzionalità al pulsante:
Qui, la finestra.posizione.La proprietà HREF è stata impostata sul percorso del file che deve essere scaricato dalla macchina del client. Poiché solo il nome del file è stato utilizzato come percorso del file, ciò significa che il file è posizionato all'interno della stessa cartella del documento HTML:
Comunque, ciò causerebbe il download del browser.
Passaggio 3: Test
Alla fine, accendi il documento HTML e fai clic sul pulsante e osserva che il browser inizierà immediatamente a scaricare il file come:
Poiché è chiaro dalla GIF sopra che l'intera pagina web funziona perfettamente come previsto.
Esempio 2: usando jQuery e etichetta
Per questo esempio, la parte dello script sarebbe scritta in jQuery e a Il collegamento del tag causerebbe l'avvio del browser il download del file previsto.
Passo 1: Imposta il documento HTML
Proprio come il primo esempio, crea un nuovo documento HTML chiamato "Home" e quindi aggiungi le seguenti righe all'interno di quel documento HTML:
Fai clic sul pulsante in basso per scaricare il file!
Clicca qui!
Ora, in questo esempio, un Tag con l'ID "Download" viene utilizzato al posto di un pulsante. L'esecuzione di questo documento HTML produrrà i seguenti risultati sulla pagina Web:
Il prossimo è aggiungere un po 'di jQuery per scaricare il file ogni volta che viene cliccato il collegamento.
Passaggio 2: codice jQuery
Nel tag script o nel file di script, aggiungi le seguenti righe:
$ (documento).ready (function ()$ ("#download").Click (function (e)
e.preventDefault ();
finestra.posizione.href = "demo.docx ";
);
);
Nelle righe sopra:
- Una funzione viene chiamata una volta che il documento è completamente pronto
- All'interno di quella funzione, è stato applicato un controllo costante sull'elemento con l'ID "scaricamento" che in realtà è il etichetta E il controllo è di un evento "clicca"
- Dopodiché, accedi semplicemente alla posizione.attributo HREF al percorso del file.
Passaggio 3: test
Accendi il documento HTML e fai clic sul collegamento e osserva la risposta del risultato per essere così:
Il collegamento cliccabile sta causando il download della macchina del client il file previsto utilizzando jQuery
Incartare
Per utilizzare JavaScript o JQuery per far scaricare un file specifico della macchina del client, semplicemente accedere all'attributo HREF della proprietà di posizione dell'oggetto finestra e impostarlo uguale al percorso completo del file sul server. Utilizzando in questo modo, è facile creare un pulsante che farà scaricare il file. Inoltre, un collegamento cliccabile per causare il download del file. Comunque, la procedura è stata spiegata accuratamente negli esempi di cui sopra.