Създаване на PDF файлове чрез безплатен JavaScript API

Първи стъпки с PDFMake

PDFMake е достъпен в npm, можете лесно да го изтеглите и инсталирате на вашата машина. Моля, използвайте следната команда за гладка инсталация.

bower install pdfmake

Генерирайте PDF файлове с помощта на JavaScript библиотека

JavaScript библиотеката с отворен код PDFMake улеснява софтуерните програмисти да генерират PDF документи в собствените си приложения, използвайки JavaScript код. Библиотеката предоставя пълен набор от функции за работа с PDF файлове, като например избор на типове шрифтове с размер, цвят и форматиране, добавяне на нова страница, вмъкване на колони, добавяне и прилагане на стилове, вмъкване на таблици, изтриване на нежелани страници и много Повече ▼.

Добавете горни и долни колонтитули към PDF файл

Горните и долните колонтитули са много полезни части от PDF документи и могат да се използват за включване на онази част от съдържанието, която потребителите искат да се показва на всяка страница от документ, като име на автор, заглавие на документ, номера на страници, лого и много други. JavaScript библиотеката PDFMake предоставя пълна поддръжка за добавяне и модифициране на горни и долни колонтитули към PDF документ. Той поддържа функции като добавяне на повтарящи се горен/долен колонтитул, вмъкване на изображения в горен/долен колонтитул, добавяне на номера на страници и много други.

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

Вмъкване на изображения в PDF файлове

JavaScript библиотеката с отворен код PDFMake предоставя пълна поддръжка за добавяне, както и за модифициране на изображения в PDF файлове с помощта на JavaScript команди. Библиотеката предоставя функции за задаване на ширина и височина на изображението, поставяне на изображение в правоъгълник, извикване на изображение чрез URL адреси, пропорционално мащабиране на изображението и разтягане на изображението. Ако искате да използвате едно и също изображение в множество възли, трябва да го поставите в речника на изображението и просто да го наречете с името му.

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

Ориентация на страницата и поддръжка на полета

Безплатната JavaScript библиотека PDFMake включва поддръжка за задаване на размер на страницата, ориентация на страницата, както и полета на страницата в приложенията на JavaScript. За да зададете размера на страницата, трябва да посочите ширината и височината на новата страница. По подразбиране библиотеката използва портретна ориентация на страницата, но може лесно да я зададе на пейзажна с едноредов код. Той също така осигурява поддръжка за задаване на полета на страници и позволява на потребителите динамично да контролират прекъсванията на страниците. Поддържа ляво, горно, дясно, долно, както и хоризонтални и вертикални полета.

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

Вмъкване на таблици в PDF чрез JavaScript

Библиотеката с отворен код PDFMake позволява на компютърните програмисти да вмъкват и актуализират таблици в PDF файлове. Библиотеката поддържа различни разширени функции за обработка на редове, колони и клетки на таблицата. Включва поддръжка за подравняване на таблица, стилизиране на граници на таблица, дефиниране на ширини в проценти, завъртане на таблици, дефиниране на ред за заглавка на таблица на нова страница и много други.

 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