Oprettelse af PDF-filer via Gratis JavaScript API

Kom godt i gang med PDFMake

PDFMake er tilgængelig på npm, Du kan nemt downloade det og installere det på din maskine. Brug venligst følgende kommando for problemfri installation.

bower install pdfmake

Generer PDF-filer ved hjælp af JavaScript-bibliotek

Open source JavaScript-biblioteket PDFMake gør det nemt for softwareprogrammører at generere PDF-dokumenter i deres egne applikationer ved hjælp af JavaScript-kode. Biblioteket har givet et komplet sæt funktioner til at arbejde med PDF-filer, såsom at vælge skrifttyper med størrelse, farve og formatering, tilføje en ny side, indsætte kolonner, tilføje og anvende typografier, indsætte tabeller, slette uønskede sider og mange mere.

Føj sidehoveder og sidefødder til PDF-fil

Sidehoveder og sidefødder er meget nyttige dele af PDF-dokumenter og kan bruges til at inkludere den del af indholdet, som brugerne ønsker skal vises på hver side i et dokument, såsom forfatternavn, dokumenttitel, sidetal, logo og meget mere. JavaScript-biblioteket PDFMake har ydet komplet support til at tilføje og ændre sidehoveder og sidefødder til et PDF-dokument. Den understøtter funktioner som f.eks. tilføjelse af gentagne sidehoved/sidefod, indsættelse af billeder i sidehoved/sidefod, tilføjelse af sidetal og meget mere.

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

Indsættelse af billeder til PDF-filer

Open source JavaScript-biblioteket PDFMake har ydet komplet support til at tilføje såvel som ændring af billeder inde i PDF-filer ved hjælp af JavaScript-kommandoer. Biblioteket har leveret funktioner til indstilling af billedets bredde og højde, tilpasning af et billede inde i et rektangel, opkald til et billede via URL'er, skalering af billedet proportionalt og billedstrækning. Hvis du vil bruge det samme billede i flere noder, skal du lægge det i billedordbogen og bare kalde det ved dets navn.

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

Sideorientering og marginstøtte

Det gratis JavaScript-bibliotek PDFMake har inkluderet understøttelse af indstilling af sidestørrelse, sideorientering samt sidemargener inde i JavaScript-apps. For at indstille sidestørrelsen skal du angive bredden og højden på den nye side. Som standard bruger biblioteket stående sideretning, men kan nemt indstille det til liggende med one-liner-kode. Det giver også støtte til indstilling af sidemargener og giver brugerne mulighed for dynamisk at kontrollere sideskift. Den understøtter venstre, top, højre, bund samt vandrette og lodrette marginer.

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

Indsæt tabeller til PDF via JavaScript

Open source-biblioteket PDFMake gør det muligt for computerprogrammører at indsætte og opdatere tabeller i PDF-filer. Biblioteket understøtter forskellige avancerede funktioner til håndtering af tabellens rækker, kolonner og celler. Det har inkluderet understøttelse af tabeljustering, stil tabelgrænser, definering af bredder i procent, roter tabeller, definer tabeloverskriftsrække på ny side og mange flere.

 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