Creazione di file PDF tramite API JavaScript gratuita

Guida introduttiva a PDFMake

PDFMake è disponibile su npm, puoi facilmente scaricarlo e installarlo sul tuo computer. Utilizzare il comando seguente per un'installazione senza problemi.

bower install pdfmake

Genera file PDF utilizzando la libreria JavaScript

La libreria JavaScript open source PDFMake consente ai programmatori di software di generare facilmente documenti PDF all'interno delle proprie applicazioni utilizzando il codice JavaScript. La libreria ha fornito una serie completa di funzionalità per lavorare con i file PDF, come la scelta dei tipi di carattere con dimensione, colore e formattazione, l'aggiunta di una nuova pagina, l'inserimento di colonne, l'aggiunta e l'applicazione di stili, l'inserimento di tabelle, l'eliminazione di pagine indesiderate e molti altri di più.

Aggiungi intestazioni e piè di pagina al file PDF

Le intestazioni e i piè di pagina sono parti molto utili dei documenti PDF e possono essere utilizzati per includere quella parte del contenuto che gli utenti desiderano appaia su ogni pagina di un documento, come il nome dell'autore, il titolo del documento, i numeri di pagina, il logo e molto altro. La libreria JavaScript PDFMake ha fornito un supporto completo per l'aggiunta e la modifica di intestazioni e piè di pagina a un documento PDF. Supporta funzionalità come l'aggiunta di intestazioni/piè di pagina ripetitivi, l'inserimento di immagini in un'intestazione/piè di pagina, l'aggiunta di numeri di pagina e molto altro.

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

Inserimento di immagini in file PDF

La libreria JavaScript open source PDFMake ha fornito supporto completo per l'aggiunta e la modifica di immagini all'interno di file PDF utilizzando i comandi JavaScript. La libreria ha fornito funzionalità per impostare la larghezza e l'altezza dell'immagine, adattare un'immagine all'interno di un rettangolo, chiamare un'immagine tramite URL, ridimensionare l'immagine in modo proporzionale e allungare l'immagine. Se vuoi usare la stessa immagine in più nodi, devi inserirla nel dizionario delle immagini e chiamarla semplicemente per 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',
   }
  }
 }
};

Orientamento della pagina e supporto del margine

La libreria JavaScript gratuita PDFMake ha incluso il supporto per l'impostazione della dimensione della pagina, dell'orientamento della pagina e dei margini della pagina all'interno delle app JavaScript. Per impostare la dimensione della pagina è necessario fornire la larghezza e l'altezza della nuova pagina. Per impostazione predefinita, la libreria utilizza l'orientamento verticale della pagina, ma può facilmente impostarlo in orizzontale con il codice a una riga. Fornisce inoltre supporto per l'impostazione dei margini di pagina e consente agli utenti di controllare dinamicamente le interruzioni di pagina. Supporta i margini sinistro, superiore, destro, inferiore, orizzontale e verticale.

 
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
		}
	}
}

Inserisci tabelle in PDF tramite JavaScript

La libreria open source PDFMake consente ai programmatori di computer di inserire e aggiornare tabelle all'interno di file PDF. La libreria supporta varie funzionalità avanzate per la gestione delle colonne e delle celle delle righe della tabella. Include il supporto per l'allineamento delle tabelle, lo stile dei bordi delle tabelle, la definizione delle larghezze in percentuale, la rotazione delle tabelle, la definizione della riga dell'intestazione della tabella su una nuova pagina e molti altri.

 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