Cómo guardar la página HTML como PDF usando JavaScript

Cómo guardar la página HTML como PDF usando JavaScript

Al crear sitios web, los diseñadores web deben proporcionar la opción para que los usuarios guarden un formulario o página como PDF. Por ejemplo, los sitios web que ofrecen admisiones universitarias y universitarias usan esta opción, pidiendo a los usuarios que completen la aplicación en línea, la descargue como un archivo PDF y luego lo envíen en el campus.

Esta publicación describirá el método para guardar la página HTML como PDF.

Cómo guardar la página HTML como PDF usando JavaScript?

Para guardar una página HTML como PDF, use las bibliotecas JavaScript "jspdf" con "html2canvas". JSPDF es una biblioteca de código abierto basada en JavaScript para crear documentos PDF. Ofrece varias posibilidades para crear archivos PDF con características específicas. Incluye una variedad de complementos para admitir varios métodos de creación de PDF, mientras que HTML2Canvas es una biblioteca JavaScript que genera una vista a partir de los datos en la página.

Ejemplo

En un archivo HTML, primero, crearemos una página web que tenga la siguiente tabla:
































IdentificaciónNombreDesignaciónDia de ingresoEdad
1JohnHORA16 de mayo de 200026
2RohndaGerente23Junes200524
3StephenContador20 septiembre 200826

Ahora, crea un "Imprimir"Botón que llamará al"imprimir()Método "En el evento de clic para convertir la página HTML en un archivo PDF:

Para convertir la página HTML en PDF, agregue el "jspdf" y "html2canvas"Bibliotecas a la etiqueta en el archivo HTML. Para el "jspdf"Biblioteca, use el siguiente código:

Para el "html2canvas"Biblioteca, use el siguiente enlace:

En el archivo JavaScript o en la etiqueta, agregue el siguiente código:

ventana.jspdf = ventana.jspdf.jspdf;
var DOCPDF = new JSPDF ();
function print ()
var elementohtml = documento.QuerySelector ("#printtable");
DOCPDF.html (elementhtml,
Callback: function (DOCPDF)
DOCPDF.Guardar ('html linuxhint web página web.pdf ');
,
X: 15,
Y: 15,
Ancho: 170,
Windowwidth: 650
);

En el código anterior:

  • Primero, JavaScript debe cargar la clase JSPDF y usar el objeto JSPDF.
  • Entonces, defina un "imprimir()"Función que activará el clic del botón.
  • Utilizando el "QuerySelector ()"Método, obtendremos el contenido HTML de un elemento especificado por ID.
  • Cree un archivo PDF convirtiendo el contenido HTML del área seleccionada del sitio web.
  • Luego, descargue y guarde el contenido HTML como un archivo PDF.

La salida indica que la página web HTML se convierte correctamente en un archivo PDF:

Se trata de guardar la página web HTML como PDF en JavaScript.

Conclusión

Para guardar la página web HTML como PDF, use el JavaScript "jspdf"Biblioteca con el"html2canvas" biblioteca. JSPDF es una biblioteca de código abierto utilizada para convertir la página HTML en PDF, mientras que HTML2CanVas se utiliza para crear una vista basada en los datos de la página. Esta publicación describió el método para guardar la página HTML como PDF.