PDF failų kūrimas naudojant nemokamą JavaScript API

Darbo su PDFMake pradžia

PDFMake galima rasti adresu npm, galite lengvai jį atsisiųsti ir įdiegti į savo kompiuterį. Norėdami sklandžiai įdiegti, naudokite šią komandą.

bower install pdfmake

Generuokite PDF failus naudodami „JavaScript“ biblioteką

Atvirojo kodo JavaScript biblioteka PDFMake leidžia programinės įrangos programuotojams lengvai generuoti PDF dokumentus savo programose, naudojant JavaScript kodą. Biblioteka suteikė visą funkcijų rinkinį, skirtą darbui su PDF failais, pvz., šrifto tipų pasirinkimą pagal dydį, spalvą ir formatavimą, naujo puslapio pridėjimą, stulpelių įterpimą, stilių pridėjimą ir pritaikymą, lentelių įterpimą, nepageidaujamų puslapių ištrynimą ir daugelį kitų. daugiau.

Pridėkite antraštes ir poraštes prie PDF failo

Antraštės ir poraštės yra labai naudingos PDF dokumentų dalys ir gali būti naudojamos įtraukti tą turinio dalį, kurią vartotojai nori matyti kiekviename dokumento puslapyje, pvz., autoriaus vardą, dokumento pavadinimą, puslapių numerius, logotipą ir daug daugiau. „JavaScript“ biblioteka „PDFMake“ suteikė visišką palaikymą PDF dokumento antraštėms ir poraštėms pridėti ir keisti. Jis palaiko tokias funkcijas kaip pasikartojančios antraštės / poraštės pridėjimas, vaizdų įterpimas į antraštę / poraštę, puslapių numerių pridėjimas ir daug daugiau.

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

Vaizdų įterpimas į PDF failus

Atvirojo kodo „JavaScript“ biblioteka „PDFMake“ suteikė visišką palaikymą PDF failų vaizdų įtraukimui ir keitimui naudojant „JavaScript“ komandas. Bibliotekoje yra funkcijų, leidžiančių nustatyti vaizdo plotį ir aukštį, pritaikyti vaizdą stačiakampyje, iškviesti vaizdą per URL, proporcingą vaizdo mastelį ir ištempti vaizdą. Jei norite naudoti tą patį vaizdą keliuose mazguose, turite įdėti jį į vaizdų žodyną ir tiesiog pavadinti jį vardu.

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

Puslapio orientacijos ir paraštės palaikymas

Nemokama „JavaScript“ biblioteka „PDFMake“ apima puslapio dydžio, puslapio orientacijos ir puslapio paraščių nustatymo „JavaScript“ programose palaikymą. Norėdami nustatyti puslapio dydį, turite nurodyti naujo puslapio plotį ir aukštį. Pagal numatytuosius nustatymus biblioteka naudoja stačią puslapio orientaciją, tačiau ją galima lengvai nustatyti į gulsčią su vienos eilutės kodu. Tai taip pat palaiko puslapio paraštes ir leidžia vartotojams dinamiškai valdyti puslapių pertraukas. Jis palaiko kairę, viršutinę, dešinę, apatinę, taip pat horizontalias ir vertikalias paraštes.

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

Įterpkite lenteles į PDF naudodami „JavaScript“.

Atvirojo kodo biblioteka PDFMake leidžia kompiuterių programuotojams įterpti ir atnaujinti lenteles į PDF failus. Biblioteka palaiko įvairias išplėstines lentelės eilučių stulpelių ir langelių tvarkymo funkcijas. Tai apima lentelių lygiavimo palaikymą, lentelės kraštinių stilių, pločio nustatymą procentais, lentelių pasukimą, lentelės antraštės eilutės apibrėžimą naujame puslapyje ir daug daugiau.

 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