Criação de arquivos PDF via API JavaScript gratuito

Introdução ao PDFMake

PDFMake está disponível em npm, você pode facilmente baixá-lo e instalá-lo em sua máquina. Por favor, use o seguinte comando para uma instalação suave.

bower install pdfmake

Gerar arquivos PDF usando a biblioteca JavaScript

A biblioteca JavaScript de código aberto PDFMake facilita para os programadores de software gerar documentos PDF dentro de seus próprios aplicativos usando código JavaScript. A biblioteca fornece um conjunto completo de recursos para trabalhar com arquivos PDF, como escolher tipos de fonte com tamanho, cor e formatação, adicionar uma nova página, inserir colunas, adicionar e aplicar estilos, inserir tabelas, excluir páginas indesejadas e muitos mais.

Adicionar cabeçalhos e rodapés ao arquivo PDF

Cabeçalhos e rodapés são partes muito úteis de documentos PDF e podem ser usados para incluir a parte do conteúdo que os usuários desejam que apareça em cada página de um documento, como nome do autor, título do documento, números de página, logotipo e muito mais. A biblioteca JavaScript PDFMake fornece suporte completo para adicionar e modificar cabeçalhos e rodapés em um documento PDF. Ele suporta recursos como adicionar cabeçalho/rodapé repetitivo, inserir imagens em um cabeçalho/rodapé, adicionar números de página e muito mais.

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

Inserindo imagens em arquivos PDF

A biblioteca JavaScript de código aberto PDFMake fornece suporte completo para adicionar e modificar imagens dentro de arquivos PDF usando comandos JavaScript. A biblioteca fornece recursos para definir a largura e a altura da imagem, ajustar uma imagem dentro de um retângulo, chamar uma imagem por meio de URLs, dimensionar a imagem proporcionalmente e esticar a imagem. Se você quiser usar a mesma imagem em vários nós, precisará colocá-la no dicionário de imagens e apenas chamá-la pelo nome.

 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',
   }
  }
 }
};

Orientação de página e suporte de margem

A biblioteca JavaScript gratuita PDFMake inclui suporte para definir o tamanho da página, a orientação da página e as margens da página dentro de aplicativos JavaScript. Para definir o tamanho da página, você precisa fornecer a largura e a altura da nova página. Por padrão, a biblioteca usa orientação de página de retrato, mas pode facilmente configurá-la para paisagem com código de uma linha. Ele também oferece suporte para definir as margens da página e permite que os usuários controlem dinamicamente as quebras de página. Ele suporta margens esquerda, superior, direita, inferior, bem como horizontal e 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
		}
	}
}

Inserir tabelas em PDF via JavaScript

A biblioteca de código aberto PDFMake permite que programadores de computador insiram e atualizem tabelas dentro de arquivos PDF. A biblioteca oferece suporte a vários recursos avançados para manipular as colunas e células das linhas da tabela. Ele inclui suporte para alinhamento de tabela, estilo de bordas de tabela, definição de larguras em porcentagem, rotação de tabelas, definição de linha de cabeçalho de tabela na nova página e muito mais.

 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