PDF-bestanden maken via gratis JavaScript-API

Aan de slag met PDFMake

PDFMake is beschikbaar op npm, u kunt het eenvoudig downloaden en op uw computer installeren. Gebruik de volgende opdracht voor een vlotte installatie.

bower install pdfmake

Genereer PDF-bestanden met behulp van JavaScript-bibliotheek

De open source JavaScript-bibliotheek PDFMake maakt het voor softwareprogrammeurs gemakkelijk om PDF-documenten in hun eigen toepassingen te genereren met behulp van JavaScript-code. De bibliotheek heeft een complete set functies gegeven voor het werken met PDF-bestanden, zoals het kiezen van lettertypen met grootte, kleur en opmaak, het toevoegen van een nieuwe pagina, het invoegen van kolommen, het toevoegen en toepassen van stijlen, het invoegen van tabellen, het verwijderen van ongewenste pagina's en nog veel meer. meer.

Kop- en voetteksten toevoegen aan PDF-bestand

Kop- en voetteksten zijn zeer nuttige onderdelen van PDF-documenten en kunnen worden gebruikt om dat deel van de inhoud op te nemen dat gebruikers op elke pagina van een document willen weergeven, zoals een auteursnaam, documenttitel, paginanummers, logo en nog veel meer. De JavaScript-bibliotheek PDFMake biedt volledige ondersteuning voor het toevoegen en wijzigen van kop- en voetteksten aan een PDF-document. Het ondersteunt functies zoals het toevoegen van herhaalde koptekst/voettekst, het invoegen van afbeeldingen in een koptekst/voettekst, het toevoegen van paginanummers en nog veel meer.

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

Afbeeldingen invoegen in PDF-bestanden

De open source JavaScript-bibliotheek PDFMake biedt volledige ondersteuning voor het toevoegen en wijzigen van afbeeldingen in PDF-bestanden met behulp van JavaScript-commando's. De bibliotheek biedt functies voor het instellen van de breedte en hoogte van afbeeldingen, het plaatsen van een afbeelding in een rechthoek, het aanroepen van een afbeelding via URL's, het proportioneel schalen van de afbeelding en het uitrekken van afbeeldingen. Als u dezelfde afbeelding in meerdere knooppunten wilt gebruiken, moet u deze in het afbeeldingenwoordenboek plaatsen en het gewoon bij de naam noemen.

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

Paginarichting en margeondersteuning

De gratis JavaScript-bibliotheek PDFMake biedt ondersteuning voor het instellen van paginagrootte, paginaoriëntatie en paginamarges in JavaScript-apps. Om het paginaformaat in te stellen, moet u de breedte en hoogte van de nieuwe pagina opgeven. Standaard gebruikt de bibliotheek de staande pagina-oriëntatie, maar kan deze eenvoudig worden ingesteld op liggend met one-liner-code. Het biedt ook ondersteuning voor het instellen van paginamarges en stelt gebruikers in staat om pagina-einden dynamisch te beheren. Het ondersteunt links, boven, rechts, onder en horizontale en verticale marges.

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

Tabellen invoegen in PDF via JavaScript

Met de open source bibliotheek PDFMake kunnen computerprogrammeurs tabellen in PDF-bestanden invoegen en bijwerken. De bibliotheek ondersteunt verschillende geavanceerde functies voor het verwerken van rijen, kolommen en cellen van tabellen. Het heeft onder meer ondersteuning voor tabeluitlijning, stijltabelranden, het definiëren van breedtes in procenten, het roteren van tabellen, het definiëren van de tabelkoprij op een nieuwe pagina en nog veel meer.

 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