Oppretting av PDF-filer via gratis JavaScript API

Komme i gang med PDFMake

PDFMake er tilgjengelig på npm, du kan enkelt laste det ned og installere det på maskinen din. Bruk følgende kommando for jevn installasjon.

bower install pdfmake

Generer PDF-filer ved hjelp av JavaScript Library

JavaScript-biblioteket med åpen kildekode PDFMake gjør det enkelt for programvareprogrammerere å generere PDF-dokumenter i sine egne applikasjoner ved hjelp av JavaScript-kode. Biblioteket har gitt et komplett sett med funksjoner for å jobbe med PDF-filer, for eksempel å velge skrifttyper med størrelse, farge og formatering, legge til en ny side, sette inn kolonner, legge til og bruke stiler, sette inn tabeller, slette uønskede sider, og mange mer.

Legg til topptekster og bunntekster i PDF-filen

Topp- og bunntekster er svært nyttige deler av PDF-dokumenter og kan brukes til å inkludere den delen av innholdet som brukere ønsker skal vises på hver side i et dokument, for eksempel forfatternavn, dokumenttittel, sidetall, logo og mye mer. JavaScript-biblioteket PDFMake har gitt fullstendig støtte for å legge til og endre topptekster og bunntekster i et PDF-dokument. Den støtter funksjoner som å legge til repeterende topptekst/bunntekst, sette inn bilder i topptekst/bunntekst, legge til sidetall og mye mer.

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

Sette inn bilder til PDF-filer

JavaScript-biblioteket PDFMake med åpen kildekode har gitt fullstendig støtte for å legge til og endre bilder i PDF-filer ved hjelp av JavaScript-kommandoer. Biblioteket har gitt funksjoner for å stille inn bildebredde og -høyde, tilpasse et bilde i et rektangel, kalle et bilde via URL-er, skalere bildet proporsjonalt og strekke bildet. Hvis du vil bruke det samme bildet i flere noder, må du legge det inn i bildeordboken og bare kalle det ved 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-biblioteket PDFMake har inkludert støtte for innstilling av sidestørrelse, sideorientering samt sidemarger i JavaScript-apper. For å angi sidestørrelsen må du angi bredden og høyden på den nye siden. Som standard bruker biblioteket stående sideretning, men kan enkelt sette den til liggende med enlinjekode. Den gir også støtte for å angi sidemarger og lar brukere kontrollere sideskift dynamisk. Den støtter venstre, topp, høyre, bunn samt horisontale og vertikale marger.

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

Sett inn tabeller til PDF via JavaScript

Open source-biblioteket PDFMake gjør det mulig for dataprogrammerere å sette inn og oppdatere tabeller i PDF-filer. Biblioteket støtter ulike avanserte funksjoner for håndtering av kolonner og celler i tabellens rader. Den har inkludert støtte for tabelljustering, stil tabellkanter, definering av bredder i prosent, roter tabeller, definer tabelloverskriftsrad 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