Muchas veces, nos hemos enfrentado al problema de guardar una página web en particular o cualquier elemento específico en línea que necesitemos guardar en forma de archivo pdf mientras usamos el navegador. En ese caso, hemos utilizado la extensión de terceros o cualquier aplicación o herramienta para generarlo en un archivo pdf. En este artículo, aprenderemos a diseñar el archivo pdf generado en tiempo de ejecución a través de HTML. Esta tarea se puede lograr de 3 maneras:
- Imprima la página web específica y guárdela como PDF
- Usando la biblioteca jsPDF
- Usando la biblioteca html2pdf
Comprendamos los 3 conceptos uno por uno con la ayuda de ejemplos.
1.Imprima el elemento específico y guárdelo como PDF:
Vamos a generar una ventana y guardarla como un pdf durante el tiempo de ejecución. Esto es similar a las funciones de impresión predeterminadas del sistema. Los pasos se discuten a continuación.
- Cree una nueva ventana usando el método ‘ window.open ‘.
- Escriba el HTML interno para nuestra etiqueta <div>, dentro de esa ventana.
- Imprime la ventana
- Cerrar la ventana
Ejemplo: En este ejemplo, usaremos el enlace CDN html2pdf que ayudará a generar el archivo pdf.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- html2pdf CDN-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
</script>
<style>
.container {
position: fixed;
top: 20%;
left: 28%;
margin-top: -65px;
margin-left: -100px;
border-radius: 7px;
}
.card {
box-sizing: content-box;
width: 700px;
height: 150px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
#button {
background-color: #4caf50;
border-radius: 5px;
margin-left: 650px;
margin-bottom: 5px;
color: white;
}
h2 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<button id="button">Generate PDF</button>
<div class="card" id="makepdf">
<h2>Welcome to GeeksforGeeks</h2>
<ul>
<li>
<h4>
We are going to generate a pdf
from the area inside the box
</h4>
</li>
<li>
<h4>
This is an example of generating
pdf from HTML during runtime
</h4>
</li>
</ul>
</div>
</div>
</body>
<script>
var button = document.getElementById("button");
var makepdf = document.getElementById("makepdf");
button.addEventListener("click", function () {
var mywindow = window.open("", "PRINT",
"height=400,width=600");
mywindow.document.write(makepdf.innerHTML);
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
});
</script>
</html>
Producción:
2. Usando la biblioteca jsPDF:
Para generar un pdf en tiempo de ejecución, podemos usar la biblioteca jsPDF. Los pasos son:
- Incluya jsPDF CDN en la etiqueta <head> en el documento HTML. El CDN se proporciona a continuación, busque ‘JsPDF CDN’ en Google para obtener la última versión.
- Genere un pdf desde el div HTML usando el método ‘fromHTML’.
- Guarde el archivo usando el método save() en javascript.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>jsPDF Library</title>
<!--JSPDF CDN-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js">
</script>
<style>
.container {
position: fixed;
top: 20%;
left: 28%;
margin-top: -65px;
margin-left: -100px;
border-radius: 7px;
}
#makepdf {
box-sizing: content-box;
width: 700px;
height: 150px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
#button {
background-color: #4caf50;
border-radius: 5px;
margin-left: 650px;
margin-bottom: 5px;
color: white;
}
h2 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<button id="button">Generate PDF</button>
<div id="makepdf">
<h2>Welcome to GeeksforGeeks</h2>
<ul>
<li>
<h4>
We are going to generate a pdf
from the area inside the box
</h4>
</li>
<li>
<h4>
This is an example of generating
pdf from HTML during runtime
</h4>
</li>
</ul>
</div>
</div>
<script>
var button = document.getElementById("button");
button.addEventListener("click", function () {
var doc = new jsPDF("p", "mm", [300, 300]);
var makePDF = document.querySelector("#makepdf");
// fromHTML Method
doc.fromHTML(makePDF);
doc.save("output.pdf");
});
</script>
</body>
</html>
Producción:
3. Usando la biblioteca html2pdf:
Los pasos para generar un archivo pdf utilizando la biblioteca html2pdf son:
- Incluya el CDN html2pdf en la parte superior del documento HTML. El CDN se proporciona a continuación, busque ‘html2pdf CDN’ en Google para obtener la última versión.
- Genera pdf usando el objeto html2pdf(). Este es un objeto predeterminado de la biblioteca html2pdf.
- Guarde el pdf.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- html2pdf CDN-->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
</script>
<style>
.container {
position: fixed;
top: 20%;
left: 28%;
margin-top: -65px;
margin-left: -100px;
border-radius: 7px;
}
.card {
box-sizing: content-box;
width: 700px;
height: 150px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
#button {
background-color: #4caf50;
border-radius: 5px;
margin-left: 650px;
margin-bottom: 5px;
color: white;
}
h2 {
text-align: center;
color: #24650b;
}
</style>
</head>
<body>
<div class="container">
<button id="button">Generate PDF</button>
<div class="card" id="makepdf">
<h2>Welcome to GeeksforGeeks</h2>
<ul>
<li>
<h4>
We are going to generate a pdf
from the area inside the box
</h4>
</li>
<li>
<h4>
This is an example of generating
pdf from HTML during runtime
</h4>
</li>
</ul>
</div>
</div>
<script>
var button = document.getElementById("button");
var makepdf = document.getElementById("makepdf");
button.addEventListener("click", function () {
html2pdf().from(makepdf).save();
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA