Crearea fișierelor PDF prin API-ul JavaScript gratuit

Noțiuni introductive cu PDFMake

PDFMake este disponibil la npm, îl puteți descărca și instala cu ușurință pe computer. Vă rugăm să utilizați următoarea comandă pentru o instalare fără probleme.

bower install pdfmake

Generați fișiere PDF utilizând Biblioteca JavaScript

Biblioteca JavaScript open source PDFMake facilitează programatorilor de software să genereze documente PDF în propriile aplicații folosind codul JavaScript. Biblioteca a oferit un set complet de caracteristici pentru lucrul cu fișiere PDF, cum ar fi alegerea tipurilor de font cu dimensiune, culoare și formatare, adăugarea unei pagini noi, inserarea coloanelor, adăugarea și aplicarea stilurilor, inserarea tabelelor, ștergerea paginilor nedorite și multe Mai Mult.

Adăugați anteturi și subsoluri la fișierul PDF

Anteturile și subsolurile sunt părți foarte utile ale documentelor PDF și pot fi folosite pentru a include acea parte a conținutului pe care utilizatorii doresc să apară pe fiecare pagină a unui document, cum ar fi numele autorului, titlul documentului, numerele paginilor, sigla și multe altele. Biblioteca JavaScript PDFMake a oferit suport complet pentru adăugarea și modificarea antetelor și subsolurilor la un document PDF. Acceptă funcții precum adăugarea unui antet/subsol repetitiv, inserarea de imagini într-un antet/subsol, adăugarea numerelor de pagină și multe altele.

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

Inserarea imaginilor în fișiere PDF

Biblioteca JavaScript open source PDFMake a oferit suport complet pentru adăugarea și modificarea imaginilor din fișierele PDF folosind comenzi JavaScript. Biblioteca a oferit caracteristici pentru setarea lățimii și înălțimii imaginii, potrivirea unei imagini în interiorul unui dreptunghi, apelarea unei imagini prin adrese URL, scalarea proporțională a imaginii și extinderea imaginii. Dacă doriți să utilizați aceeași imagine în mai multe noduri, trebuie să o puneți în dicționarul de imagini și să o numiți după numele ei.

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

Orientarea paginii și suportul pentru marjă

Biblioteca JavaScript gratuită PDFMake a inclus suport pentru setarea dimensiunii paginii, orientării paginii, precum și a marginilor paginii în aplicațiile JavaScript. Pentru a seta dimensiunea paginii, trebuie să furnizați lățimea și înălțimea paginii noi. În mod implicit, biblioteca folosește orientarea paginii portret, dar o poate seta cu ușurință pe peisaj cu un cod cu o singură linie. De asemenea, oferă suport pentru setarea marginilor de pagină și permite utilizatorilor să controleze dinamic întreruperile de pagină. Suportă marginile stânga, sus, dreapta, jos, precum și orizontale și 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
		}
	}
}

Inserați tabele în PDF prin JavaScript

Biblioteca cu sursă deschisă PDFMake permite programatorilor de computere să insereze și să actualizeze tabele în interiorul fișierelor PDF. Biblioteca acceptă diverse funcții avansate pentru gestionarea coloanelor și celulelor rândurilor tabelului. Include suport pentru alinierea tabelelor, chenarele tabelului de stil, definirea lățimii în procente, rotirea tabelelor, definirea rândului antet tabel pe pagina nouă și multe altele.

 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