Para convertir los datos del formulario HTML en pdf, el enfoque principal es utilizar la función html2pdf() de la biblioteca html2pdf.
Enfoque: primero, cree un formulario con tipo de cifrado como texto y agregue algunos campos de entrada. Después de eso, necesitamos usar la función html2pdf (elemento) de la biblioteca html2pdf. Proporcione una función onclick() en el botón Enviar del formulario. La función html2pdf (elemento) toma una entrada que es la identificación de la etiqueta o formulario que debe convertirse a formato pdf.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<!-- CSS only -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous" rel="stylesheet">
<!-- Html2Pdf -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js"
integrity=
"sha512vDKWohFHe2vkVWXHp3tKvIxxXg0pJxeid5eo+UjdjME3DBFBn2F8yWOE0XmiFcFbXxrEOR1JriWEno5Ckpn15A=="
crossorigin="anonymous">
</script>
<style>
.heading{
text-align: center;
color: #2F8D46;
}
</style>
</head>
<body>
<h2 class="heading">
GeeksForGeeks
</h2>
<!-- Form encrypted as text -->
<form id ="form-print" enctype="text/plain"
class="form-control">
<label for="name">
<strong>Name: </strong>
</label>
<input class="form-control" type="text"
id="name" name="Name" placeholder="Enter Name">
<br>
<label for="age">
<strong>Enter Age: </strong>
</label>
<input class="form-control" type="text"
id="age" name="Age" placeholder="Enter Age">
<br>
<label for="subject">
<strong>Select Subject: </strong>
</label>
<select class="form-control"
id="subject" name="subject">
<option value="Web">
Web development
</option>
<option value="App">
App development
</option>
<option value="Others">
Others
</option>
</select>
<br>
<label for="message">
<strong>Enter Message </strong>
</label>
<textarea class= "form-control"
id="message" name="message"
placeholder="Enter you message"
style="height:100px">
</textarea>
<br>
<input type="button" class="btn btn-primary"
onclick="GeneratePdf();" value="GeneratePdf">
</form>
<script>
// Function to GeneratePdf
function GeneratePdf() {
var element = document.getElementById('form-print');
html2pdf(element);
}
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous">
</script>
</body>
</html>
Producción:
Página de inicio (página de índice)
El Pdf del formulario Html
Hay mucha funcionalidad de la biblioteca html2pdf que puede explorar para cambiar el nombre del archivo (de Pdf), su proporción y mucho más. Para explorar más, consulte la documentación de la biblioteca html2pdf .
Publicación traducida automáticamente
Artículo escrito por PranjalGoyal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA