Від автора: в даному відео я хотів би розглянути створення pdf-документів на стороні клієнта, тобто використовуючи функціонал мови JavaScript. При цьому ми скористаємося готової бібліотекою під назвою Pdfmake ,завдяки якій можна швидко створити документ вище зазначеного формату не задіюючи серверна мова програмування. Готуючись до цього уроку, я перебрав безліч різних бібліотек, але свій вибір зробив на користь Pdfmake, хоча деякі з розглянутих мною, були більш і більш зручні в роботі. Так чому ж я пропоную Вам використовувати цю бібліотеку, запитаєте Ви, головна її перевага це повна підтримка кириличних символів, що дозволить створювати документи російською мовою.
Офіційний сайт бібліотеки Ви знайдете за цим посиланням.
На сторінці “Getting Started (Docs)” Ви знайдете офіційну документацію по даній бібліотеці. Для установки бібліотеки, необхідно перейти за посиланням “Sources”, на сторінку pdfmake, сервісу GitHub, де власне ми отримаємо можливість скачування даної бібліотеки.
Скачавши архів останньої актуальної версії Pdfmake, необхідно його розпакувати і в отриманому каталозі знайти папку build. В даній папці нас цікавлять два файла:pdfmake.min.js – власне це і є бібліотека і vfs_fonts.js – бібліотека для роботи зі шрифтами.
Вищевказані копіюємо файли в каталог зберігання скриптів JavaScript і підключаємо на цікавому сайті.
Так само підключимо порожній файл script.js, в якому ми будемо писати код.
Далі відкриваємо порожній файл script.js в текстовому редакторі і створимо змінну docInfo, яка буде зберігати в собі об’єкт з інформацією про майбутнє документі. Тобто подальше формування документа буде зведено до визначення властивостей об’єкта docInfo.
var docInfo = {};
Насамперед визначимо основні параметри документа PDF.
vardocInfo = {
info: {
title:’Тестовий PDF-файл’,
author:’Viktor’,
subject:’Theme’,
keywords:’Ключові слова’
},
}
Властивість info, визначає основні параметри документа в цілому:
title – заголовок документа.
author – автор.
subject – тема.
keywords – ключові слова.
Далі задамо параметри аркушів документа.
var docInfo = {
info: {
title:’Тестовий PDF-файл’,
author:’Viktor’,
subject:’Theme’,
keywords:’Ключевыеслова’
},
pageSize:’A4′,
pageOrientation:’landscape’,//’portrait’
pageMargins:[50,50,30,60],
header:function(currentPage,pageCount) {
return {
text: currentPage.toString() + ‘з’ + pageCount,
alignment:’right’,
margin:[0,30,10,50]
}
},
Використовувані властивості.
pageSize – розмір аркушів документів. Повний список підтримуваних значень наведено в документації.
pageOrientation – розташування сторінки.
pageMargins – відступи(від лівого краю, від верхнього краю, від правого краю, від нижнього краю).
Далі поставимо верхній колонтитул.
vardocInfo = {
info: {
title:’Тестовий PDF-файл’,
author:’Viktor’,
subject:’Theme’,
keywords:’Ключові слова’
},
pageSize:’A4′,
pageOrientation:’landscape’,//’portrait’
pageMargins:[50,50,30,60],
header:function(currentPage,pageCount) {
return {
text: currentPage.toString() + ‘з’ + pageCount,
alignment:’right’,
margin:[0,30,10,50]
}
}
}
Властивість header, може приймати значення, анонімну функцію, яка повинна повернути об’єкт з даними верхнього колонтитула:
text – текст заголовка.
alignment – розташування тексту.
margin – зовнішні відступи.
В якості параметрів анонімна функція приймає змінну currentPage – об’єкт поточної сторінки і змінну pageCount – загальна кількість сторінок документа. Крім заголовка, ми можемо поставити за аналогією – нижній.
var docInfo = {
info: {
title:’Тестовий PDF-файл’,
author:’Viktor’,
subject:’Theme’,
keywords:’Ключові слова’
},
pageSize:’A4′,
pageOrientation:’landscape’,//’portrait’
pageMargins:[50,50,30,60],
header:function(currentPage,pageCount) {
return {
text: currentPage.toString() + ‘з’ + pageCount,
alignment:’right’,
margin:[0,30,10,50]
}
},
footer:[
{
text:’нижній колонтитул’,
alignment:’center’,//left right
}
]
}
Швидше за все, Ви здогадалися, що властивість footer, зберігає об’єкт з інформацією нижнього колонтитула. При цьому властивість text містить текст колонтитула, а alignment – визначає його розташування.
Для створення контенту документа, що використовується властивість content, яке містить в собі масив об’єктів. Кожна комірка масиву, а значить і об’єкт – це окремий параграф з інформацією документа.
var docInfo = {
info: {
title:’Тестовий PDF-файл’,
author:’Viktor’,
subject:’Theme’,
keywords:’Ключові слова’
},
pageSize:’A4′,
pageOrientation:’landscape’,//’portrait’
pageMargins:[50,50,30,60],
header:function(currentPage,pageCount) {
return {
text: currentPage.toString() + ‘з’ + pageCount,
alignment:’right’,
margin:[0,30,10,50]
}
},
footer:[
{
text:’нижній колонтитул’,
alignment:’center’,//left right
}
],
content: [
{
text:’Текст певного параграфа’,
fontSize:20,
margin:[150,80, 30,0]
//pageBreak:’after’
},
{
text:’Текст певного параграфа № 2′,
style:’header’
//pageBreak:’before’
}
]
}
Зверніть увагу, що параграф формується об’єктом, з наступними властивостями:
text – текст параграфа;
fontSize – розмір шрифту;
margin – зовнішній відступ;
pageBreak – розрив сторінки. Якщо вказано значення after – розрив сторінки буде визначено після поточного параграфа, якщо вказано значення before– розрив, буде перед поточним параграфом;
style – ім’я стилю оформлення тексту параграфа.
Якщо для конкретного параграфа визначені стилі, отже їх необхідно описати в окремому властивості styles.
styles: {
header: {
fontSize:25,
bold:true,
alignment:’right’
}
}
Для відображення текстової інформації у вигляді колонок, необхідно в одній з комірок властивості content, створити об’єкт з властивістю columns, в якому буде міститися масив з даними відображеними в колонках. Причому, кількість елементів даного масиву, визначає кількість майбутніх колонок, а в кожній клітинці розміщується об’єкт з даними для відображення.
{
columns:[
{
width:’auto’,
text:’Текст колонки №1′
},
{
width:150,
text:’Текст колонки №2′
},
{
width:’*’,
text:’Текст колонки №3′
},
{
width:’10%’,
text:’Текст колонки №4′
},
],
columnGap: 20
}
Розміри колонок задаються властивості width. При цьому ширину Ви можете задавати, використовуючи значення в пікселях, у відсотках,а так само використовувати автоматичне визначення ширини, залежно від вмісту (auto), і замість значення вказувати ‘*’, тим самим визначаючи ширину на все місце, що залишилося. Оступы між коолонками задаються властивості columnGap.
Для створення таблиць, достатньо в одному з параграфів, визначити об’єкт table.
{
table:{
widths:[‘*’,’auto’,150,’*’],
body:[
[‘Перша’,’Друга’,’Третя’,’Четверта’],
[‘Перша’,’Друга’,’Третя’,’Четверта’],
[{text:’текстове вміст’,bold:true},’Друга’,’Третя’,’Четверта’]
],
headerRows:1
}
}
При цьому, у властивості widths, визначається масив з кількістю та шириною колонок, властивості body – масив об’єктів з інформацією відображається безпосередньо в клітинках таблиці. При цьому кожна клітинка цього масиву – це окрема рядок таблиці. Властивість headerRows – визначає, скільки рядків таблиці приймається в якості шапки.
Для створення не нумерованого списку, необхідно в певному параграфі, створити властивість ul.
{
ul: [
‘Пункт 1’,
‘Пункт 2’,
‘Пункт 3’,
‘Пункт 4′,
{
text:’Пункт 5’,
bold:true
}
]
}
Аналогічно реалізується нумерований список.
{
ol: [
‘Пункт 1’,
‘Пункт 2’,
‘Пункт 3’,
‘Пункт 4′,
{
text:’Пункт 5’,
bold:true
}
]
}
Після того як об’єкт майбутнього документа, визначено ми можемо створити документ PDF, звертаючись до об’єкта pdfMake і викликаючи на виконання метод createPdf().
pdfMake.createPdf(docInfo).download(‘name.pdf’);
Для віддачі документа на скачування, необхідно викликати метод виконання завантажити() і в якості першого аргументу передати ім’я файлу згенерованого PDFдокумента.
На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!
