Scarica un file utilizzando JavaScript
-
Usa l’attributo
downloadin HTML per scaricare i file - Utilizzo di una funzione scritta personalizzata per creare e scaricare file di testo in JavaScript
-
Usa la libreria
Axiosper scaricare i file
In questo articolo impareremo come scaricare file utilizzando JavaScript. Il download automatico dei file ci aiuta a recuperare i file direttamente dall’URL con una funzione JavaScript senza contattare alcun server. Raggiungeremo questo obiettivo utilizzando le nostre funzioni scritte personalizzate e l’attributo di download di HTML 5.
Usa l’attributo download in HTML per scaricare i file
L’attributo download in HTML 5 viene utilizzato per scaricare file quando gli utenti fanno clic sul collegamento ipertestuale. Viene utilizzato con i tag di ancoraggio - <a> e <area>. Ci viene richiesto di impostare l’attributo href specificando l’origine del file. Il valore dell’attributo download determina il nome del file scaricato. Se questo valore viene rimosso, il nome del file scaricato sarà lo stesso del nome del file originale.
<!DOCTYPE html>
<html>
<head>
<title>How to Download files Using JavaScript </title>
</head>
<body>
<a href="apple.png" download="apple">
<button type="button">Download</button>
</a>
</body>
</html>
Nel codice sopra, scarichiamo un’immagine apple.png utilizzando l’attributo download. Per prima cosa creiamo l’anchor tag contenente l’indirizzo dell’immagine e aggiungiamo l’attributo download ad esso. Quindi abbiamo anche creato un pulsante di download per facilitare il download dei file.
Utilizzo di una funzione scritta personalizzata per creare e scaricare file di testo in JavaScript
Questo approccio creerà dati di testo al volo e quindi utilizzerà JavaScript per creare un file di testo e quindi scaricarlo.
Scarica Algorithm
-
Crea un’area di testo per inserire i dati di testo.
-
Crea un tag di ancoraggio
<a>utilizzando la proprietàcreateElemente assegnagli gli attributidownloadehref. -
Usa
encodeURIComponentper codificare il testo e aggiungerlo all’URI come componente. Questo ci aiuterà a sostituire alcuni caratteri speciali con una combinazione di sequenze di escape. -
Imposta il tipo di data su
text/plaine la codifica suUTF-8usando idata:text/plain; charset = utf-8come valore dell’attributo dihref. -
Aggiungi questo elemento creato al corpo del documento (pagina HTML).
-
Usa
element.click()per simulare un clic del mouse. -
Rimuove l’elemento dal corpo del documento (pagina HTML).
Allega un listener di eventi che cerca un clic a un pulsante di download. Chiama la funzione di download con il testo dall’area di testo e il nome del file di testo come parametri.
<!DOCTYPE html>
<html>
<head>
<title>
How to Download files Using JavaScript
</title>
</head>
<body>
<textarea id="text">DelftStack</textarea>
<br />
<input type="button" id="btn" value="Download" />
<script>
function download(filename, textInput) {
var element = document.createElement('a');
element.setAttribute('href','data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
//document.body.removeChild(element);
}
document.getElementById("btn")
.addEventListener("click", function () {
var text = document.getElementById("text").value;
var filename = "output.txt";
download(filename, text);
}, false);
</script>
</body>
</html>
Usa la libreria Axios per scaricare i file
In questo approccio, useremo la libreria Axios per scaricare i file. Prima di procedere con i dettagli dell’approccio, cerchiamo di capire cos’è Blob, il tipo di dati utilizzato per scaricare i file utilizzando Axios.
Blob
Blob sta per Binary Large Object ed è un tipo di dati che può memorizzare dati binari. Rappresenta dati come programmi, frammenti di codice, oggetti multimediali e altre cose che non supportano il formato nativo di JavaScript.
Scaricare files
-
Crea una richiesta
getAxios con URL come sorgente del file eresponseTypecomeblob. -
Risolvi la promessa restituita dalla richiesta Axios eseguendo i seguenti passaggi:
- Crea una DOMString che contiene l’URL che rappresenta l’oggetto Blob.
- Crea un tag di ancoraggio
<a>utilizzando la proprietàcreateElemente assegnagli gli attributidownloadehref. - Imposta
hrefcome l’URL creato nel primo passaggio e l’attributodownloadcome nome del file scaricato. - Allegare questo collegamento al documento e simulare un clic utilizzando il metodo
.click(). - Rimuovi questo collegamento dal documento.
<!DOCTYPE html>
<html>
<head>
<title>How to download files using JavaScript</title>
</head>
<body>
<button onclick="download()">
Download Image
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js">
</script>
<script>
function download() {
axios({
url: 'https://source.unsplash.com/random/500x500',
method: 'GET',
responseType: 'blob'
})
.then((response) => {
const url = window.URL
.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'image.jpg');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
}
</script>
</body>
</html>
Qui otteniamo immagini casuali da un sito, utilizziamo Axios per richiedere quelle immagini sotto forma di blob, quindi le scarichiamo utilizzando l’attributo download dell’anchor tag. Questo metodo non è limitato al testo normale inserito dall’utente come il metodo precedente. Possiamo richiedere qualsiasi tipo di dati da un’API e quindi utilizzare questo approccio per salvare i dati all’interno del nostro computer.
Tutti i principali browser supportano tutti i metodi precedenti eccetto il metodo che utilizza la libreria Axios. Internet Explorer non supporta ancora le promesse ES6 native e Axios dipende molto da esse.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn