Para activar la descarga de un archivo al hacer clic en un botón, utilizaremos una función personalizada o un atributo de descarga de HTML 5.
Enfoque 1: uso del atributo de
descarga El atributo de descarga simplemente usa una etiqueta de anclaje para preparar la ubicación del archivo que debe descargarse. El nombre del archivo se puede configurar usando el nombre del valor del atributo; si no se proporciona, se usará el nombre del archivo original.
Sintaxis
<a download="filename">
filename: el atributo especifica el nombre del archivo que se descargará.
Ejemplo:
html
<!DOCTYPE html>
<html>
<body>
<style>
p {
color: green;
}
</style>
<p>How to trigger a file download when
clicking an HTML button or JavaScript?
<p>
<!-- GFG is the name of the
file to be downloaded-->
<!-- In order to run the code,
the location of the file
"geeksforgeeks.png" needs to
be changed to your local directory,
both the HTML and downloadable file
needs to be present in the same directory -->
<a href="geeksforgeeks.png" download="GFG">
<button type="button">Download</button>
</a>
</body>
</html>
Producción:
Enfoque 2: usar una función javascript personalizada
- primero hizo un área de texto donde se emitirá toda la entrada de texto.
- haga una etiqueta de anclaje usando la propiedad createElement y luego asignándole el atributo de descarga y href.
- encodeURIComponent codificará todo con un significado especial, por lo que lo usará para componentes de URI.
Por ejemplo, si tenemos un texto como “Hola: ¿Geek?”, hay caracteres especiales en este, por lo que encodeURIComponent los codificará y los agregará para su uso posterior. - datos:texto/simple; charset=utf-8 es el valor del atributo de href (como href=” “), especifica que el valor debe ser de tipo texto y con codificación tipo UTF-8. El método click() simula un clic del mouse en un elemento.
- Después de eso, simplemente llamamos a nuestra función de descarga con el texto de textarea y nuestro nombre de archivo «GFG.txt» como parámetros en el botón de entrada con id ‘btn’.
Ejemplo:
html
<!DOCTYPE html>
<html>
<body>
<style>
p {
color: green;
}
</style>
<p>
How to trigger a file download when
clicking an HTML button or JavaScript?
<p>
<textarea id="text">
Welcome to GeeksforGeeks
</textarea>
<br/>
<input type="button" id="btn"
value="Download" />
<script>
function download(file, text) {
//creating an invisible element
var element = document.createElement('a');
element.setAttribute('href',
'data:text/plain;charset=utf-8, '
+ encodeURIComponent(text));
element.setAttribute('download', file);
// Above code is equivalent to
// <a href="path of file" download="file name">
document.body.appendChild(element);
//onClick property
element.click();
document.body.removeChild(element);
}
// Start file download.
document.getElementById("btn")
.addEventListener("click", function() {
// Generate download of hello.txt
// file with some content
var text = document.getElementById("text").value;
var filename = "GFG.txt";
download(filename, text);
}, false);
</script>
</body>
</html>
Producción:
Enfoque 3: usar una función javascript personalizada con Axios Library
En este ejemplo, descargaremos imágenes y archivos usando Axios. Esto requiere un poco de conocimiento intermedio de JavaScript para funcionar y en este ejemplo se usará una biblioteca Axios .
html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Download Images using Axios</title>
<style>
.scroll {
height: 1000px;
background-color: white;
}
</style>
</head>
<body>
<p id="dest">
<h1 style="color: green">
GeeksforGeeks
</h1>
</p>
<button onclick="download()">
Download Image
</button>
<p class="scroll">
By clicking the download button
will generate a random image.
</p>
</body>
<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();
})
}
</script>
</html>
</html>
Producción:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .