Skapa PDF-filer via gratis JavaScript API

Komma igång med PDFMake

PDFMake är tillgängligt på npm, du kan enkelt ladda ner det och installera det på din maskin. Använd följande kommando för smidig installation.

bower install pdfmake

Generera PDF-filer med JavaScript-bibliotek

JavaScript-biblioteket med öppen källkod PDFMake gör det enkelt för programvaruprogrammerare att skapa PDF-dokument i sina egna applikationer med JavaScript-kod. Biblioteket har gett en komplett uppsättning funktioner för att arbeta med PDF-filer, som att välja teckensnittstyper med storlek, färg och formatering, lägga till en ny sida, infoga kolumner, lägga till och tillämpa stilar, infoga tabeller, ta bort oönskade sidor och många Mer.

Lägg till sidhuvuden och sidfötter till PDF-filen

Sidhuvuden och sidfötter är mycket användbara delar av PDF-dokument och kan användas för att inkludera den del av innehållet som användare vill ska visas på varje sida i ett dokument, såsom ett författarenamn, dokumenttitel, sidnummer, logotyp och mycket mer. JavaScript-biblioteket PDFMake har tillhandahållit komplett stöd för att lägga till och ändra sidhuvuden och sidfötter i ett PDF-dokument. Den stöder funktioner som att lägga till upprepad sidhuvud/sidfot, infoga bilder i en sidhuvud/sidfot, lägga till sidnummer och mycket mer.

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

Infoga bilder till PDF-filer

JavaScript-biblioteket med öppen källkod PDFMake har tillhandahållit komplett stöd för att lägga till och ändra bilder i PDF-filer med JavaScript-kommandon. Biblioteket har tillhandahållit funktioner för att ställa in bildens bredd och höjd, passa in en bild i en rektangel, anropa en bild via webbadresser, skala bilden proportionellt och bildsträcka ut. Om du vill använda samma bild i flera noder måste du lägga in den i bildlexikonet och bara kalla den vid dess namn.

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

Sidorientering och marginalstöd

Det kostnadsfria JavaScript-biblioteket PDFMake har inkluderat stöd för att ställa in sidstorlek, sidorientering samt sidmarginaler i JavaScript-appar. För att ställa in sidstorleken måste du ange bredd och höjd på den nya sidan. Som standard använder biblioteket stående sidorientering men kan enkelt ställa in det till liggande med en rad kod. Det ger också stöd för att ställa in sidmarginaler och tillåter användare att dynamiskt styra sidbrytningar. Den stöder vänster, topp, höger, botten samt horisontella och vertikala marginaler.

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

Infoga tabeller till PDF via JavaScript

Biblioteket med öppen källkod PDFMake gör det möjligt för datorprogrammerare att infoga och uppdatera tabeller i PDF-filer. Biblioteket stöder olika avancerade funktioner för att hantera kolumner och celler i tabellens rader. Det har inkluderat stöd för tabelljustering, stil tabellkanter, definiera bredder i procent, rotera tabeller, definiera tabellhuvudrad på ny sida och många fler.

 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