Створення 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