En este post se muestra como descargar un fichero pdf que está almacenado en una URL y por lo tanto lo despacha un servidor web. Para hacer esta descarga desde el lado cliente con javascript se utilizan 2 técnicas:
- Descargar mediante propiedad download de la etiqueta anchor de html
- Descarga utilizando la librería download.js
1. Descarga mediante propiedad download de la etiqueta anchor
<html>
<head>
<meta charset="UTF-8">
<title>Descarga de un fichero PDF</title>
<script type="text/javascript">
function DownloadFromUrl(fileURL, fileName) {
var link = document.createElement('a');
link.href = fileURL;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</head>
<body>
<h1>Descarga de un fichero PDF</h1>
<button
onClick="DownloadFromUrl('http://127.0.0.1:5500/scrum_manager.pdf',
'Fichero.pdf')">
Descargar
</button>
</body>
</html>
<meta charset="UTF-8">
<title>Descarga de un fichero PDF</title>
<script type="text/javascript">
function DownloadFromUrl(fileURL, fileName) {
var link = document.createElement('a');
link.href = fileURL;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</head>
<body>
<h1>Descarga de un fichero PDF</h1>
<button
onClick="DownloadFromUrl('http://127.0.0.1:5500/scrum_manager.pdf',
'Fichero.pdf')">
Descargar
</button>
</body>
</html>
2. Descaga utilizando la librería download.js
Esta librería se puede descargar en http://danml.com/download.html#Download.
Esta técnica permite descargar ficheros en formato: Strings, Blob, Arrays y desde URL. En el ejemplo aquí mostrado se descarga un fichero desde una URL. En el caso de tener problemas con CORS, se pueden adoptar dos soluciones. Si se está haciendo una prueba de la técnica, instalar una extensión al browser para que se salte la política CORS y el servidor permita acceder al fichero. Si es para una función que se implanta en producción, hay que configurar la política CORS del servidor que sirve el fichero a descargar.
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="download.js"></script>
<title>Descarga de un fichero PDF</title>
</head>
<body>
<h1>Descarga de un fichero PDF</h1>
<button onClick="download('http://127.0.0.1:5500/scrum_manager.pdf')">Descargar</button>
</body>
</html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="download.js"></script>
<title>Descarga de un fichero PDF</title>
</head>
<body>
<h1>Descarga de un fichero PDF</h1>
<button onClick="download('http://127.0.0.1:5500/scrum_manager.pdf')">Descargar</button>
</body>
</html>
Terminando
Espero que sean ejemplos de utlidad. He intentado ser breve e ir al grano para no hacer perder el tiempo al lector. Si hay algún problema o duda, enviad comentarios. Serán atendidos a la mayor brevedad posible.
No hay comentarios:
Publicar un comentario