Saltar al contenido

Ariapsa - Diseño de páginas web México

Código para forzar descarga de archivos PDF, VCF etc...

 

Es probable que te hayas percatado que algunos archivos no es posible descargarlos cuando el navegador puede abrirlos, para ello hay que forzar la descarga mediante un sencillo código HTML:

Opción 1: Usando un elemento <a> con el atributo download

Para forzar la descarga de un archivo en HTML, puedes utilizar el atributo download en un elemento <a>

En este ejemplo, debes reemplazar "ruta_del_archivo/archivo.zip" con la ubicación real de tu archivo y "nombre_del_archivo.zip" con el nombre deseado para el archivo descargado.

Ejemplo 1:

<p style="text-align: center;"><span style="color: #ccffe6;"><strong><a style="color: #0cd0b4;" href="https://misdescargas.com/card/miarchivo.vcf" download="Blog_Ariapsa_México">Guardar archivo</a></strong></span></p>

 

Ejemplo 2:

<a href="ruta_del_archivo/archivo.zip" download="nombre_del_archivo.zip">Descargar Archivo</a>

Opción 2: Usando JavaScript y el método Blob

En este ejemplo, el archivo se genera mediante JavaScript y se utiliza el elemento <a> para simular un clic en él y forzar la descarga.

Recuerda personalizar la ruta, el nombre del archivo y el contenido según tus necesidades específicas.

 

<button id="descargar">Descargar Archivo</button>

<script>
document.getElementById('descargar').addEventListener('click', function() {
// Contenido del archivo (puede ser texto, bytes, etc.)
var contenido = "Este es el contenido del archivo.";

// Crear un objeto Blob con el contenido
var blob = new Blob([contenido], { type: 'application/octet-stream' });

// Crear una URL para el objeto Blob
var url = URL.createObjectURL(blob);

// Crear un enlace para descargar el archivo
var a = document.createElement('a');
a.href = url;
a.download = 'nombre_del_archivo.txt'; // Nombre del archivo a descargar
document.body.appendChild(a);

// Simular un clic en el enlace para iniciar la descarga
a.click();

// Liberar la URL del objeto Blob
URL.revokeObjectURL(url);
});
</script>

QR Code
¡Enfoca el QR con tu cámara de fotos!