Vytváření souborů PDF prostřednictvím bezplatného rozhraní JavaScript API

Začínáme s PDFMake

PDFMake je k dispozici na npm, můžete si jej snadno stáhnout a nainstalovat do svého počítače. Pro hladkou instalaci použijte následující příkaz.

bower install pdfmake

Generujte soubory PDF pomocí knihovny JavaScript

Open source JavaScriptová knihovna PDFMake usnadňuje softwarovým programátorům generování PDF dokumentů v jejich vlastních aplikacích pomocí JavaScript kódu. Knihovna poskytla kompletní sadu funkcí pro práci se soubory PDF, jako je výběr typů písem s velikostí, barvou a formátováním, přidání nové stránky, vložení sloupců, přidání a použití stylů, vložení tabulek, odstranění nežádoucích stránek a mnoho dalších více.

Přidat záhlaví a zápatí do souboru PDF

Záhlaví a zápatí jsou velmi užitečné části dokumentů PDF a lze je použít k zahrnutí té části obsahu, kterou uživatelé chtějí zobrazit na každé stránce dokumentu, jako je jméno autora, název dokumentu, čísla stránek, logo a mnoho dalšího. JavaScriptová knihovna PDFMake poskytuje kompletní podporu pro přidávání a úpravy záhlaví a zápatí do PDF dokumentu. Podporuje funkce, jako je přidávání opakujícího se záhlaví/zápatí, vkládání obrázků do záhlaví/zápatí, přidávání čísel stránek a mnoho dalšího.

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

Vkládání obrázků do souborů PDF

Open source JavaScriptová knihovna PDFMake poskytuje úplnou podporu pro přidávání a úpravu obrázků uvnitř souborů PDF pomocí příkazů JavaScriptu. Knihovna poskytuje funkce pro nastavení šířky a výšky obrázku, přizpůsobení obrázku do obdélníku, volání obrázku přes URL, proporcionální měřítko obrázku a roztahování obrázku. Pokud chcete použít stejný obrázek ve více uzlech, musíte jej vložit do obrázkového slovníku a nazvat jej jeho jménem.

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

Orientace stránky a podpora okrajů

Bezplatná JavaScriptová knihovna PDFMake obsahuje podporu pro nastavení velikosti stránky, orientace stránky a okrajů stránky v aplikacích JavaScript. Chcete-li nastavit velikost stránky, musíte zadat šířku a výšku nové stránky. Ve výchozím nastavení používá knihovna orientaci stránky na výšku, ale lze ji snadno nastavit na šířku pomocí jednořádkového kódu. Poskytuje také podporu pro nastavení okrajů stránek a umožňuje uživatelům dynamicky ovládat konce stránek. Podporuje levý, horní, pravý, spodní a také vodorovný a svislý okraj.

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

Vkládání tabulek do PDF pomocí JavaScriptu

Open source knihovna PDFMake umožňuje počítačovým programátorům vkládat a aktualizovat tabulky do souborů PDF. Knihovna podporuje různé pokročilé funkce pro práci s řádky, sloupci a buňkami tabulky. Obsahuje podporu pro zarovnání tabulky, styl ohraničení tabulky, definování šířky v procentech, otáčení tabulek, definování řádku záhlaví tabulky na nové stránce a mnoho dalších.

 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