Tworzenie plików PDF za pomocą bezpłatnego interfejsu API JavaScript

Pierwsze kroki z PDFMake

PDFMake jest dostępny w npm, możesz go łatwo pobrać i zainstalować na swoim komputerze. Użyj następującego polecenia, aby uzyskać płynną instalację.

bower install pdfmake

Generuj pliki PDF za pomocą biblioteki JavaScript

Biblioteka JavaScript typu open source PDFMake ułatwia programistom generowanie dokumentów PDF we własnych aplikacjach przy użyciu kodu JavaScript. Biblioteka zawiera kompletny zestaw funkcji do pracy z plikami PDF, takich jak wybór typów czcionek z rozmiarem, kolorem i formatowaniem, dodawanie nowej strony, wstawianie kolumn, dodawanie i stosowanie stylów, wstawianie tabel, usuwanie niechcianych stron i wiele jeszcze.

Dodaj nagłówki i stopki do pliku PDF

Nagłówki i stopki są bardzo przydatnymi częściami dokumentów PDF i mogą być używane do dołączania tej części treści, którą użytkownicy chcą pojawiać się na każdej stronie dokumentu, takiej jak imię i nazwisko autora, tytuł dokumentu, numery stron, logo i wiele innych. Biblioteka JavaScript PDFMake zapewnia pełną obsługę dodawania i modyfikowania nagłówków i stopek w dokumencie PDF. Obsługuje funkcje takie jak dodawanie powtarzających się nagłówków/stopek, wstawianie obrazów w nagłówku/stopce, dodawanie numerów stron i wiele innych.

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

Wstawianie obrazów do plików PDF

Biblioteka Open Source JavaScript PDFMake zapewnia pełną obsługę dodawania i modyfikowania obrazów w plikach PDF za pomocą poleceń JavaScript. Biblioteka zawiera funkcje do ustawiania szerokości i wysokości obrazu, dopasowywania obrazu do prostokąta, wywoływania obrazu za pośrednictwem adresów URL, proporcjonalnego skalowania obrazu i rozciągania obrazu. Jeśli chcesz użyć tego samego obrazu w wielu węzłach, musisz umieścić go w słowniku obrazów i nazwać go po prostu jego nazwą.

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

Orientacja strony i wsparcie marginesu

Bezpłatna biblioteka JavaScript PDFMake zawiera obsługę ustawiania rozmiaru strony, orientacji strony oraz marginesów strony w aplikacjach JavaScript. Aby ustawić rozmiar strony, musisz podać szerokość i wysokość nowej strony. Domyślnie biblioteka używa pionowej orientacji strony, ale można ją łatwo ustawić na poziomą za pomocą kodu jednowierszowego. Zapewnia również obsługę ustawiania marginesów strony i umożliwia użytkownikom dynamiczne kontrolowanie podziałów stron. Obsługuje lewy, górny, prawy, dolny, a także poziomy i pionowy margines.

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

Wstaw tabele do pliku PDF za pomocą JavaScript

Biblioteka open source PDFMake umożliwia programistom wstawianie i aktualizowanie tabel w plikach PDF. Biblioteka obsługuje różne zaawansowane funkcje obsługi kolumn i komórek wierszy tabeli. Zawiera obsługę wyrównania tabel, stylów obramowań tabeli, określanie szerokości w procentach, obracanie tabel, definiowanie wiersza nagłówka tabeli na nowej stronie i wiele innych.

 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