Creación de archivos PDF a través de la API de JavaScript gratuita

Primeros pasos con PDFMake

PDFMake está disponible en npm. Puede descargarlo e instalarlo fácilmente en su máquina. Utilice el siguiente comando para una instalación sin problemas.

bower install pdfmake

Genere archivos PDF utilizando la biblioteca de JavaScript

La biblioteca JavaScript de código abierto PDFMake facilita a los programadores de software la generación de documentos PDF dentro de sus propias aplicaciones utilizando código JavaScript. La biblioteca ofrece un conjunto completo de funciones para trabajar con archivos PDF, como elegir tipos de fuente con tamaño, color y formato, agregar una nueva página, insertar columnas, agregar y aplicar estilos, insertar tablas, eliminar páginas no deseadas y muchas más. más.

Agregar encabezados y pies de página a un archivo PDF

Los encabezados y pies de página son partes muy útiles de los documentos PDF y se pueden usar para incluir esa parte del contenido que los usuarios desean que aparezca en cada página de un documento, como el nombre del autor, el título del documento, los números de página, el logotipo y mucho más. La biblioteca de JavaScript PDFMake ha brindado soporte completo para agregar y modificar encabezados y pies de página a un documento PDF. Admite características como agregar encabezado/pie de página repetitivo, insertar imágenes en un encabezado/pie de página, agregar números de página y mucho más.

 var docDefinition = {
 header: 'simple text',
 footer: {
  columns: [
   'Left part',
   { text: 'Right part', alignment: 'right' }
  ]
 },
 content: (...)
};

Insertar imágenes en archivos PDF

La biblioteca de JavaScript de código abierto PDFMake ha brindado soporte completo para agregar y modificar imágenes dentro de archivos PDF usando comandos de JavaScript. La biblioteca ha proporcionado funciones para configurar el ancho y el alto de la imagen, ajustar una imagen dentro de un rectángulo, llamar a una imagen a través de URL, escalar la imagen proporcionalmente y estirar la imagen. Si desea utilizar la misma imagen en varios nodos, debe colocarla en el diccionario de imágenes y simplemente llamarla por su nombre.

 var docDefinition = {
 content: [
  {
   // you'll most often use dataURI images on the browser side
   // if no width/height/fit is provided, the original size will be used
   image: 'data:image/jpeg;base64,...encodedContent...'
  },
  {
   // if you specify width, image will scale proportionally
   image: 'data:image/jpeg;base64,...encodedContent...',
   width: 150
  },
  {
   // if you specify both width and height - image will be stretched
   image: 'data:image/jpeg;base64,...encodedContent...',
   width: 150,
   height: 150
  },
  {
   // you can also fit the image inside a rectangle
   image: 'data:image/jpeg;base64,...encodedContent...',
   fit: [100, 100]
  },
  {
   // if you reuse the same image in multiple nodes,
   // you should put it to to images dictionary and reference it by name
   image: 'mySuperImage'
  },
  {
   image: 'myImageDictionary/image1.jpg'
  },
  {
   // in browser is supported loading images via url from reference by name in images
   image: 'snow'
  },
  {
   image: 'strawberries'
  },
 ],
 images: {
  mySuperImage: 'data:image/jpeg;base64,...content...',
  snow: 'https://picsum.photos/seed/picsum/200/300',
  strawberries: {
   url: 'https://picsum.photos/id/1080/367/267'
   headers: {
    myheader: '123',
    myotherheader: 'abc',
   }
  }
 }
};

Orientación de página y compatibilidad con márgenes

La biblioteca de JavaScript gratuita PDFMake ha incluido soporte para configurar el tamaño de la página, la orientación de la página y los márgenes de la página dentro de las aplicaciones de JavaScript. Para establecer el tamaño de la página, debe proporcionar el ancho y el alto de la nueva página. De forma predeterminada, la biblioteca utiliza la orientación de página vertical, pero puede establecerla fácilmente en horizontal con un código de una sola línea. También brinda soporte para establecer márgenes de página y permite a los usuarios controlar dinámicamente los saltos de página. Admite márgenes izquierdo, superior, derecho, inferior, horizontal y vertical.

 
var dd = {
	content: [
		{
			stack: [
				'This header has both top and bottom margins defined',
				{text: 'This is a subheader', style: 'subheader'},
			],
			style: 'header'
		},
		{
			text: [
				'Margins have slightly different behavior than other layout properties. They are not inherited, unlike anything else. They\'re applied only to those nodes which explicitly ',
				'set margin or style property.\n',
			]
		},
		{
			text: 'This paragraph (consisting of a single line) directly sets top and bottom margin to 20',
			margin: [0, 20],
		},
		{
			stack: [
				{text: [
						'This line begins a stack of paragraphs. The whole stack uses a ',
						{text: 'superMargin', italics: true},
						' style (with margin and fontSize properties).',
					]
				},
				{text: ['When you look at the', {text: ' document definition', italics: true}, ', you will notice that fontSize is inherited by all paragraphs inside the stack.']},
				'Margin however is only applied once (to the whole stack).'
			],
			style: 'superMargin'
		},
	],
	styles: {
		header: {
			fontSize: 18,
			bold: true,
			alignment: 'right',
			margin: [0, 190, 0, 80]
		},
		subheader: {
			fontSize: 14
		},
		superMargin: {
			margin: [20, 0, 40, 0],
			fontSize: 15
		}
	}
}

Insertar tablas en PDF a través de JavaScript

La biblioteca de código abierto PDFMake permite a los programadores de computadoras insertar y actualizar tablas dentro de archivos PDF. La biblioteca admite varias funciones avanzadas para manejar las filas, columnas y celdas de la tabla. Incluye compatibilidad con la alineación de tablas, estilos de bordes de tablas, definición de anchos en porcentaje, rotación de tablas, definición de la fila del encabezado de la tabla en una página nueva y mucho más.

 var docDefinition = {
 content: [
  {
   layout: 'lightHorizontalLines', // optional
   table: {
    // headers are automatically repeated if the table spans over multiple pages
    // you can declare how many rows should be treated as headers
    headerRows: 1,
    widths: [ '*', 'auto', 100, '*' ],
    body: [
     [ 'First', 'Second', 'Third', 'The last one' ],
     [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
     [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
    ]
   }
  }
 ]
};
pdfMake.createPdf(docDefinition, tableLayouts, fonts, vfs)
// tableLayouts, fonts and vfs are all optional - falsy values will cause