Экспорт AngularJS в PDF с использованием библиотеки pdfmake.js.
В этом руководстве мы обсудим, как настроить, спроектировать и реализовать font-awesome в ваших экспортированных файлах PDF.
Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »
Библиотеку pdfmake.js можно установить с помощью bower cd в вашу директорию angular и запустить этот код, чтобы получить последнюю версию pdfmake.js.
bower install pdfmake
Его также можно скачать с гитхаба здесь. Теперь включите библиотеку в файл angularJS index.html.
<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <title>AngularJS export to pdf example.</title> <script src='pdfmake/build/pdfmake.min.js'></script> <script src='pdfmake/build/vfs_fonts.js'></script> </head> <body>
Затем создайте ссылку в представлении для вызова функции $ scope.
<a href=”#” ng-click=”downloadPDF()”></a>
Теперь создайте метод $ scope $ scope.downloadPDF в контроллере, который выполняется нашим представлением. Этот метод будет содержать внутренности нашей экспортной логики.
$scope.downloadPDF = function() {
});
Давайте создадим верхний и нижний колонтитулы для нашего PDF-файла. В нашем методе $ scope.downloadPDF
var docDefinition = {
header: function() {
return [
{
style: 'table',
margin: [62,35,62,35],
table: {
widths: ['*', '*'],
headerRows: 0,
body: [
[
{text: 'Booking Summary', style: 'topHeader', alignment: 'left'},
{
'base64-image-string-goes-here',
width: 150,
alignment: 'right'
}
]
]
},
layout: 'noBorders'
}
]
},
footer: function(currentPage, pageCount) {
return [
{text: currentPage.toString() + ' of ' + pageCount, alignment: 'center', style: 'footer'}
]
},
content: [],
pageSize: 'A4',
pageMargins: [62,80,62,80],
styles: {
topHeader: {
fontSize: 20,
bold: true,
margin: [0, 6, 0, 30],
alignment: 'left'
},
table: {
fontSize: 8,
alignment: 'left',
color: 'black',
margin: [0, 5, 0, 15]
},
header: {
fontSize: 16,
bold: true,
margin: [0, 10, 0, 15],
alignment: 'left'
},
footer: {
fontSize: 8,
margin: [0, 25, 0, 17],
alignment: 'center'
}
}
};
pdfMake.createPdf(docDefinition).download();
};
Объект docDefinition - это то, как мы описываем наш PDF-файл для рендеринга pdfmake.js. Заголовок состоит из таблицы с двумя столбцами. Ширина столбца устанавливается автоматически с помощью символа звездочки. Добавляя другую ширину к этому списку, мы даем pdfmake.js указание изменить размер нашего нового столбца.
widths: ['*', '*']
Содержимое, которое определено как таблица, можно найти в массиве тела. Левый столбец таблицы содержит текст Заголовок, связанный со ссылкой на стиль topHeader. В правом столбце таблицы в объект вставляется строка изображения base64. Мы генерируем строку base64 с помощью этого онлайн-инструмента, затем копируем и вставляем сгенерированную строку base64 base64-image-string-go-here в наш объект. Мы хотим, чтобы у этой таблицы не было границ, иначе pdfmake.js нарисует черную рамку для наших ячеек и таблицы. Функция нижнего колонтитула сопоставляет текущую страницу с общим количеством страниц в нижней части PDF-файла. Обратите внимание, что мы добавляем стиль для нижнего колонтитула с помощью селектора нижний колонтитул в объекте стилей. Подробнее о создании стилей можно прочитать здесь.
content: [
{
style: 'topTable',
table: {
widths: ['*','*', '*', '*'],
heights: [18],
headerRows: 1,
body: [
[
{text: $scope.title+' '+$scope.firstName+' '+$scope.surname,
style: 'tableHeader', colSpan: 4}, {}, {}, {}
],
[
{text: 'Type:', style: 'tableLabel'}, {text: 'Flight'},
{text: 'Verified:', style: 'tableLabel'}, {text: 'Yes'}
],
[
{text: 'Status ID:', style: 'tableLabel'}, {text: $scope.statusid},
{text: 'Supplier ID:', style: 'tableLabel'}, {text: $scope.supplierid}
],
[
{text: 'Session ID:', style: 'tableLabel'}, {text: $scope..sessionid},
{text: 'Booking ID:', style: 'tableLabel'}, {text: $scope.bookingid}
],
[
{text: 'Departing:', style: 'tableLabel'}, {text: $scope.date },
{text: 'Passengers:', style: 'tableLabel'}, {text: $scope.passengers'}
]
]
},
layout: {
paddingLeft: function(i, node) { return 8; },
paddingRight: function(i, node) { return 8; },
paddingTop: function(i, node) { return 6; },
paddingBottom: function(i, node) { return 6; },
fillColor: function (i, node) {
return (i % 2 === 0) ? '#F5F5F5' : null;
}
}
}
]
Выше, в нашем объекте содержимого, мы инструктируем pdfmake.js нарисовать таблицу, состоящую из четырех столбцов. Ширина столбца автоматически определяется символом звездочки. Мы хотим, чтобы заголовок таблицы отображался в виде одной строки, поэтому значение colspan равно 4. По умолчанию эта таблица будет иметь границы, поэтому нам просто нужно добавить отступ для каждой ячейки таблицы. Мы также хотим создать эффект зебры для каждой строки таблицы, которая определена в нашей функции fillColor.
Добавление в PDF-файл font-awesome.
Сначала нам нужно преобразовать наш файл шрифтов с потрясающим шрифтом в строку с кодировкой base64 с помощью этого инструмента. Перейдите в bower_components / pdfmake / build / vjs_fonts.js, вставьте закодированную строку font-awesome.ttf base64 в файл vjs_fonts.js. Я удалил строки из этого фрагмента кода, потому что они довольно большие, как вы сами убедитесь!
this.pdfMake = this.pdfMake || {};
this.pdfMake.vfs = {
"Roboto-Italic.ttf": "paste-roboto-base64-string-here",
"Roboto-Medium.ttf": "paste-roboto-base64-string-here",
"Roboto-MediumItalic.ttf": "paste-roboto-base64-string-here",
"Roboto-Regular.ttf": "paste-roboto-base64-string-here",
"FontAwesome.ttf": "paste-font-awesome-base64-string-here"
};
this.pdfMake.fonts = {
Roboto: {
italics : 'Roboto-Italic.ttf',
normal : 'Roboto-Regular.ttf',
bold : 'Roboto-Medium.ttf',
mediumitalics : 'Roboto-MediumItalic.ttf'
},
FontAwesome: {
normal : 'FontAwesome.ttf',
bold : 'FontAwesome.ttf',
italics : 'FontAwesome.ttf',
bolditalics: 'FontAwesome.ttf'
}
};
