Skip to main content
Agregada la explicación del target
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

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:

Autorización para descargas múltiples

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:

Icono de permiso de descarga múltiple

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.

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:

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:

Autorización para descargas múltiples

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:

Icono de permiso de descarga múltiple

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.

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).

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:

Autorización para descargas múltiples

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:

Icono de permiso de descarga múltiple

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.

Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

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:

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:

Autorización para descargas múltiples

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:

Icono de permiso de descarga múltiple

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.