Me voy a basar en un escenario cualquiera, lo más parecido a lo que propones sería por ejemplo una lista de archivos que se ofrecen en descarga y que, según tú, quieres ocultar la url donde están esos archivos.
Pondremos esa lista en forma de link, escucharemos los clicks en cada uno de ellos y lanzaremos desde el cliente una petición al servidor para que la descarga se haga directamente, que es lo que requieres.
Desde el cliente vamos a lanzar una petición XMLHttpRequest
al servidor, mandándole la ubicación del archivo. Indicaremos que se espera una respuesta del tipo blob
y a partir de la respuesta podremos descargar el archivo.
MUY IMPORTANTE:
La información sobre el nombre y ubicación de cada archivo se
encuentra en el atributo data-*
de cada li
, como se podrá apreciar
en el código fuente HMTL.
Aquí suponemos que los los siguientes archivos existen en tu servidor:
uploads
pdf
android.pdf
js.pdf
php.pdf
doc
swift.doc
txt
cobol.txt
El archivo si existe se descargará en el equipo del cliente, sin mostrar en ningún momento el enlace del recurso.
Es conveniente controlar la respuesta de la petición XMLHttpRequest
, por ejemplo, en caso de no existir el archivo, para hacer un manejo adecuado del código.
No lo he hecho por razones de brevedad.
El código ha sido probado en un entorno real y funciona.
Espero te sirva.
JavaScript:
document.addEventListener("DOMContentLoaded", function(event) {
/*Referencias a los elementos*/
var liFiles = document.querySelectorAll('.list-files li');
var divInfo = document.getElementById("info");
/*Agregamos listener a todos los <li>*/
liFiles.forEach(function(elem) {
elem.addEventListener('click', downloadFile, false);
});
/*
*Esta es la función que se ejecutará cada vez que
*se haga click en alguno de los <li>
*/
function downloadFile() {
/*
*Obtenemos el directorio, el nombre
*y construimos una ruta completa
*/
var fileDir = this.dataset.dir;
var fileName = this.dataset.name;
var filePath = `${fileDir}/${fileName}`;
/*Vamos a hacer una petición al servidor buscando el archivo*/
var req = new XMLHttpRequest();
req.open("GET", filePath, true);
req.responseType = "blob";
req.onload = function(event) {
var blob = req.response;
/*
*Aquí hacemos que el archivo se descargue
*sin ninguna acción
*/
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
};
req.send();
/*Imprimimos un mensaje*/
divInfo.textContent = "Archivo descargado... Conviene validar la respuesta y manejar posibles errores.";
}
});
HMTL:
<h2>Archivos disponibles</h2>
<hr />
<ul class="list-files">
<li data-dir="uploads/pdf" data-name="android.pdf"><a id="ff" href="#">Android</a></li>
<li data-dir="uploads/doc" data-name="swift.doc"><a href="#">Swift</a></li>
<li data-dir="uploads/pdf" data-name="js.pdf"><a href="#">Javascript</a></li>
<li data-dir="uploads/pdf" data-name="php.pdf"><a href="#">PHP</a></li>
<li data-dir="uploads/txt" data-name="cobol.txt"><a href="#">Cobol</a></li>
</ul>
<div id="info"></div>
cURL
sea mediantereadfile
poniendo los encabezados requeridos. Si te interesa hacerlo así puedo proponer un código.