От автора: в данном видео я хотел бы рассмотреть создание PDFдокументов на стороне клиента, то есть используя функционал языка JavaScript. При этом мы воспользуемся готовой библиотекой под названием Pdfmake ,благодаря которой можно быстро создать документ выше указанного формата не задействуя серверный язык программирования. Готовясь к данному уроку, я перебрал множество различных библиотек, но свой выбор все же сделал в пользу Pdfmake, хотя некоторые из рассмотренных мной, были функциональнее и более удобны в работе. Так почему же я предлагаю Вам использовать данную библиотеку, спросите Вы, главное ее преимущество это полная поддержка кириллических символов, что позволит создавать документы на русском языке.
Официальный сайт библиотеки Вы найдете по следующей ссылке.
На странице “Getting Started (Docs)” Вы найдете официальную документацию по данной библиотеке. Для установки библиотеки, необходимо перейти по ссылке “Sources”, на страничку pdfmake, сервиса GitHub, где собственно мы получим возможность скачивания данной библиотеки.
Скачав архив последней актуальной версии Pdfmake, необходимо его распаковать и в полученном каталоге найти папку build. В данной папке нас интересуют два файла:pdfmake.min.js – собственно это и есть библиотека и vfs_fonts.js – библиотека работы со шрифтами.
Вышеуказанные файлы копируем в каталог хранения скриптов языка JavaScript и подключаем на интересующем сайте.
|
1 2 |
<script src='js/pdfmake.min.js'></script> <script src='js/vfs_fonts.js'></script> |
Так же подключим пустой файл script.js, в котором мы будем писать код.
|
1 |
<script src='js/script.js'></script> |
Далее открываем пустой файл script.js в текстовом редакторе и создадим переменную docInfo, которая будет хранить в себе объект с информацией о будущем документе. То есть дальнейшее формирование документа будет сведено к определению свойств объекта docInfo.
|
1 |
var docInfo = {}; |
Первым делом определим основные параметры документа PDF.
|
1 2 3 4 5 6 7 8 9 |
vardocInfo = { info: { title:'Тестовый документ PDF', author:'Viktor', subject:'Theme', keywords:'Ключевые слова' }, } |
Свойство info, определяет основные параметры документа в целом:
title – заголовок документа.
author – автор.
subject – тема.
keywords – ключевые слова.
Далее зададим параметры листов документа.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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 – отступы(от левого края, от верхнего края, от правого края, от нижнего края).
Далее зададим верхний колонтитул.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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 – общее количество страниц документа. Помимо верхнего колонтитула, мы можем задать по аналогии – нижний.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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, которое содержит в себе массив объектов. Каждая ячейка массива, а значит и объект – это отдельный параграф с информацией документа.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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.
|
1 2 3 4 5 6 7 |
styles: { header: { fontSize:25, bold:true, alignment:'right' } } |
Для отображения текстовой информации в виде колонок, необходимо в одной из ячеек свойства content, создать объект со свойством columns, в котором будет содержаться массив с данными отображаемыми в колонках. Причем, количество ячеек данного массива, определяет количество будущих колонок, а в каждой ячейке располагается объект с данными для отображения.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
{ columns:[ { width:'auto', text:'Текст колонки №1' }, { width:150, text:'Текст колонки №2' }, { width:'*', text:'Текст колонки №3' }, { width:'10%', text:'Текст колонки №4' }, ], columnGap: 20 } |
Размеры колонок задаются в свойстве width. При этом ширину Вы можете задавать, используя значения в пикселях, в процентах,а так же использовать автоматическое определение ширины, в зависимости от контента (auto), и вместо значения указывать ‘*’, тем самым определяя ширину на все оставшееся место. Оступы между коолонками задаются в свойстве columnGap.
Для создания таблиц, достаточно в одном из параграфов, определить объект table.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ table:{ widths:['*','auto',150,'*'], body:[ ['Первая','Вторая','Третья','Четвертая'], ['Первая','Вторая','Третья','Четвертая'], [{text:'текстовое содержимое',bold:true},'Вторая','Третья','Четвертая'] ], headerRows:1 } } |
При этом, в свойстве widths, определяется массив с количеством и шириной колонок, в свойстве body – массив объектов с информацией отображаемой непосредственно в ячейках таблицы. При этом каждая ячейка данного массива – это отдельная строка таблицы. Свойство headerRows – определяет, сколько строк таблицы принимается в качестве шапки.
Для создания не нумерованного списка, необходимо в определенном параграфе, создать свойство ul.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ ul: [ 'Пункт 1', 'Пункт 2', 'Пункт 3', 'Пункт 4', { text:'Пункт 5', bold:true } ] } |
Аналогично реализуется нумерованный список.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ ol: [ 'Пункт 1', 'Пункт 2', 'Пункт 3', 'Пункт 4', { text:'Пункт 5', bold:true } ] } |
После того как объект будущего документа, определен мы можем сгенерировать документ PDF, обращаясь к объекту pdfMake и вызывая на исполнение метод createPdf().
|
1 |
pdfMake.createPdf(docInfo).download('name.pdf'); |
Для отдачи документа на скачивание, необходимо вызвать на исполнение метод download() и в качестве первого аргумента передать имя файла сгенерированного PDFдокумента.
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
Комментарии (7)