Puedes conseguir que se descarguen múltiples archivos sin hacer uso de XMLHttpRequest
y/o fetch
mediante el envío de un formulario al interior de un <iframe>
(puede estar oculto).
A continuación te muestro un ejemplo de cómo hacerlo. Debes crear un <iframe>
por cada archivo que quieras descargar en paralelo y configurar el atributo target
de cada formulario para que apunte a un iframe
diferente.
A continuación te muestro un ejemplo de cómo hacerlo:
boton.addEventListener('click', () => {
/* Enviamos los dos formularios */
formulario1.submit();
formulario2.submit();
});
iframe {
z-index: -1;
position: absolute;
border: none;
top: 0px;
left: 0px;
height: 2px;
width: 2px
}
<iframe name="iframe1" sandbox="allow-downloads"></iframe>
<iframe name="iframe2" sandbox="allow-downloads"></iframe>
<form id="formulario1" method="get"
action="https://github.com/PHPMailer/PHPMailer/archive/refs/tags/v6.5.3.zip"
target="iframe1">
</form>
<form id="formulario2" method="get"
action="https://github.com/angular/angular.js/archive/refs/tags/v1.8.2.zip"
target="iframe2">
</form>
<button id="boton">Pulsa aquí para descargar dos archivos a la vez</button>
Este código no funcionará en stackoverflow por la restricción del entorno de prueba aislado (sandbox), por lo que te enlazo un lugar donde puedes probarlo correctamente:
Ten en cuenta que el navegador no te permitirá la descarga de múltiples archivos con una única pulsación, por lo que te mostrará una advertencia:
Una vez que permitas este tipo de descargas la página estará autorizada a hacerlas hasta que revoques la autorización. La forma de hacerlo depende de cada navegador.
Verás que aparece un icono en la barra de direcciones indicando que se está haciendo uso de ese privilegio especial:
Pulsando en ese icono puedes autorizar o rechazar este privilegio y también gestionar los permisos de todos los sitios web. Es posible que haya navegadores que no muestren este icono.