¿Ya sabes como generar pdf con JavaScript? Hoy hablaremos sobre la genial biblioteca JavaScript jsPDF que le permite crear PDF utilizando solo JavaScript. Sí, es cierto, no se necesita un script del lado del servidor. Puede procesar un contenido dinámico y generar un PDF sobre la marcha cuando el usuario haga clic en el botón (o en el evento que desee)
Entonces, ¿Cómo crear pdf desde HTML con JavaScript? Es muy rápido y fácil crear un archivo PDF con jsPDF. Por ejemplo, si desea crear un archivo PDF simple con el texto «¡Hola mundo!», Simplemente use el código a continuación.
var doc = new jsPDF();
doc.text(10, 10, 'Hello world!');
doc.save('hello-world.pdf');
La primera línea, crea un objeto jsPDF. Esto representará su documento PDF con un tamaño predeterminado de papel A4 y orientación vertical. Puede pasar un parámetro adicional para que el constructor cambie el tamaño del archivo y la orientación aquí si lo desea. Hablaremos de eso más tarde.
La segunda línea es agregar una cadena de texto a una página PDF con una posición específica. El ‘¡Hola mundo!’ Se colocarán 10 milímetros desde arriba y hacia la izquierda. Sí, milímetros, no píxeles! Pero también puede cambiar la unidad de medida a otras como píxeles o pulgadas cuando cree el objeto jsPDF.
La última línea es guardar el documento (abre el cuadro de diálogo Guardar como en el navegador web) con el nombre de archivo especificado.
Tutorial para crear pdf con JavaScript
Vea el tutorial en el video a continuación o una demostración en vivo en este jsFiddle
Ahora volvamos a la primera parte. Si desea cambiar el tamaño del archivo PDF, la orientación o la unidad de medida, puede pasar el JSON al constructor de esta manera.
var doc = new jsPDF({
orientation: 'landscape',
unit: 'in',
format: [6, 2]
})
//This will make your generated PDF in 6x2 inches landscape.
Esto es solo una base de lo que es capaz de hacer jsPDF. En el siguiente artículo, voy a hablar sobre el uso de jsPDF para convertir su página HTML en un archivo PDF.
Ahora que ya aprendiste a generar pdf desde HTML con JavaScript, te invitamos a que continúes aprendiendo con nosotros.
Más artículos interesantes:
| Efectos con css |
| Modo promiscuo |