Создание 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