PDF-fájlok létrehozása ingyenes JavaScript API-n keresztül

A PDFMake használatának első lépései

A PDFMake elérhető az npm-en, egyszerűen letölthető és telepíthető a gépére. Kérjük, használja a következő parancsot a zökkenőmentes telepítéshez.

bower install pdfmake

PDF fájlok létrehozása JavaScript Library segítségével

A PDFMake nyílt forráskódú JavaScript-könyvtár megkönnyíti a szoftverprogramozók számára PDF-dokumentumok létrehozását saját alkalmazásaikban JavaScript-kód használatával. A könyvtár a PDF fájlokkal való munkavégzéshez a funkciók teljes készletét kínálja, mint például a betűtípusok kiválasztása mérettel, színnel és formázással, új oldal hozzáadása, oszlopok beszúrása, stílusok hozzáadása és alkalmazása, táblázatok beszúrása, nem kívánt oldalak törlése és sok más több.

Adjon hozzá fejlécet és lábléceket a PDF-fájlhoz

A fejlécek és a láblécek nagyon hasznos részei a PDF-dokumentumoknak, és felhasználhatók a tartalom azon részének feltüntetésére, amelyet a felhasználók a dokumentum minden oldalán szeretnének megjeleníteni, például a szerző nevét, a dokumentum címét, az oldalszámokat, a logót és még sok mást. A PDFMake JavaScript-könyvtár teljes támogatást nyújtott fejlécek és láblécek PDF-dokumentumokhoz való hozzáadásához és módosításához. Támogatja az olyan funkciókat, mint az ismétlődő fejléc/lábléc hozzáadása, képek beszúrása a fejlécbe/láblécbe, oldalszámok hozzáadása és még sok más.

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

Képek beillesztése PDF fájlokba

A PDFMake nyílt forráskódú JavaScript-könyvtár teljes mértékben támogatja a PDF-fájlokon belüli képek JavaScript-parancsok segítségével történő hozzáadását és módosítását. A könyvtár funkciókat kínál a kép szélességének és magasságának beállításához, a kép téglalapba illesztéséhez, a kép URL-en keresztüli meghívásához, a kép arányos méretezéséhez és a kép nyújtásához. Ha ugyanazt a képet több csomópontban szeretné használni, akkor be kell helyeznie a képszótárba, és csak a nevén kell neveznie.

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

Oldaltájolás és margótámogatás

Az ingyenes PDFMake JavaScript-könyvtár támogatja az oldalméret, az oldaltájolás és az oldalmargók beállítását a JavaScript-alkalmazásokon belül. Az oldalméret beállításához meg kell adnia az új oldal szélességét és magasságát. Alapértelmezés szerint a könyvtár álló oldaltájolást használ, de egysoros kóddal könnyedén beállíthatja fekvő helyzetbe. Ezenkívül támogatja az oldalmargók beállítását, és lehetővé teszi a felhasználók számára az oldaltörések dinamikus szabályozását. Támogatja a bal, felső, jobb, alsó, valamint vízszintes és függőleges margókat.

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

Táblázatok beszúrása PDF-be JavaScript segítségével

A PDFMake nyílt forráskódú könyvtár lehetővé teszi a számítógépes programozók számára, hogy táblázatokat szúrjanak be és frissítsenek a PDF-fájlokba. A könyvtár különféle speciális funkciókat támogat a táblázat sorainak, oszlopainak és celláinak kezelésére. Támogatja a táblázat igazítását, a táblázatszegélyek stílusát, a szélesség százalékos meghatározását, a táblázatok elforgatását, a táblázatfejléc sor meghatározását az új oldalon és még sok mást.

 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