No existe un método directo para descargar y enviar el formulario simultáneamente, pero podemos realizar esta tarea si controlamos el envío del formulario y, al hacer clic en el botón Enviar formulario, primero activamos la descarga del PDF y luego enviamos el formulario. Entonces, los enfoques que podemos seguir para lograr esto se discuten a continuación:
Enfoque 1: crear un botón de formulario de envío fuera del formulario:
- En primer lugar, cree un formulario con el botón de envío oculto.
- Proporcione una identificación al botón de envío del formulario para acceder a él usando JS.
- Cree un botón fuera del formulario y asígnele una identificación única para acceder a él.
- Cree una etiqueta de anclaje utilizando la propiedad createElement y asignándole el atributo href y download.
- Después de eso, simplemente llamamos al evento de clic del botón Enviar al hacer clic en el botón de descarga, usando la propiedad onClick.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
form {
color: green;
}
</style>
</head>
<body>
<!-- GFG is the name of the file to be downloaded-->
<!-- In order to run the code, the location of the
file "GFG.pdf" needs to be changed to your local
directory, both the HTML and downloadable file
needs to be present in the same directory -->
<form method="post">
<label for="username">GFG Username</label>
<input type="text" name="username" />
<input type="submit" id="submit-form"
value="submit" hidden />
</form>
<button id="download-pdf">Submit</button>
<script>
const downloadPdf = document
.querySelector("#download-pdf");
const submitForm = document
.querySelector("#submit-form");
downloadPdf.addEventListener("click", () => {
// Creating the element anchor that
// will download pdf
let element = document.createElement("a");
element.href = "./GFG.pdf";
element.download = "GFG.pdf";
// Adding the element to body
document.documentElement.appendChild(element);
// Above code is equivalent to
// <a href="path of file" download="file name">
// onClick property, to trigger download
element.click();
// Removing the element from body
document.documentElement.removeChild(element);
// onClick property, to trigger submit form
submitForm.click();
});
</script>
</body>
</html>
Producción:
Al enviar:
Enfoque 2: deshabilitar el envío al enviar: el método más fácil puede ser deshabilitar el envío al hacer clic en el botón Enviar formulario y realizar el envío manualmente al llamar a una función que descarga el PDF primero y luego envía el formulario.
- En primer lugar, cree el formulario con el atributo onsubmit establecido en ‘return: false;’, lo que en realidad evita que el formulario se envíe al hacer clic en el botón Enviar.
- Cree una etiqueta de anclaje utilizando la propiedad createElement y asignándole el atributo href y download.
- Después de eso, simplemente llamamos al evento de envío en el formulario para enviarlo, después de activar la descarga desde el elemento que creamos.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
form {
color: green;
}
</style>
</head>
<body>
<!-- GFG is the name of the file to be downloaded-->
<!-- In order to run the code, the location of the
file "GFG.pdf" needs to be changed to your local
directory, both the HTML and downloadable file
needs to be present in the same directory -->
<form id="my-form" onsubmit="return: false;">
<label for="username">GFG username</label>
<input type="text" name="username" />
<input type="submit" id="submit-form"
value="Submit" />
</form>
<script>
const myForm = document
.querySelector("#my-form");
const submitForm = document
.querySelector("#submit-form");
submitForm.addEventListener("click", () => {
// Creating element to download pdf
var element = document.createElement('a');
// Setting the path to the pdf file
element.href = 'GFG.pdf';
// Name to display as download
element.download = 'GFG.pdf';
// Adding element to the body
document.documentElement.appendChild(element);
// Above code is equivalent to
// <a href="path to file" download="download name"/>
// Trigger the file download
element.click();
// Remove the element from the body
document.documentElement.remove(element);
// Submit event, to submit the form
myForm.submit();
});
</script>
</body>
</html>
Producción:
Al enviar:
Publicación traducida automáticamente
Artículo escrito por thinkswell y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA