PDF Maker — это библиотека для создания PDF-документов на JavaScript.
Этот проект вдохновлен pdfmake и основан на pdf-lib и FontKit. Его не было бы без огромной работы и глубоких знаний, вложенных авторами этих проектов.
Функция makePdf() создает данные PDF на основе заданного определения документа . Это определение представляет собой простой объект.
Самое важное свойство в определении — это content . Это свойство принимает список блоков . Существуют различные типы блоков, такие как текстовые блоки, блоки изображений, блоки макета столбцов и строк.
const fontData = await readFile ( 'Roboto-Regular.ttf' ) ;
const fontDataItalic = await readFile ( 'Roboto-Italic.ttf' ) ;
const pdfData = await makePdf ( {
// Fonts must be registered (see below)
fonts : {
Roboto : [ { data : fontData } , { data : fontDataItalic , italic : true } ] ,
} ,
// Content as an array of blocks
content : [
// Blocks can contain text and text properties
{ text : 'Lorem ipsum' , fontStyle : 'italic' , textAlign : 'center' , fontSize : 24 } ,
// Text can also be an array of text spans with different properties
{
text : [
'dolor sit amet, consectetur adipiscing elit ' ,
{ text : 'sed do eiusmod' , fontStyle : 'italic' } ,
' tempor, incididunt ut labore et dolore magna aliqua.' ,
] ,
} ,
] ,
} ) ;
await writeFile ( `hello.pdf` , pdfData ) ;Больше примеров можно найти в папке example/.
Все шрифты встроены в PDF-файл и должны быть зарегистрированы с помощью свойства fonts . Данные шрифта принимаются в формате .ttf или .otf , например ArrayBuffer или Uint8Array. Каждое семейство шрифтов может содержать разные варианты, которые выбираются на основе свойств bold и italic . Семейство шрифтов, зарегистрированное первым, становится шрифтом по умолчанию.
const documentDefinition = {
fonts : {
'DejaVu-Sans' : [
// Different font versions for fontFamily "DejaVu-Sans"
// TTF / OTF font data as ArrayBuffer or Uin8Array
{ data : fontDataDejaVuSansNormal } ,
{ data : fontDataDejaVuSansBold , bold : true } ,
{ data : fontDataDejaVuSansItalic , italic : true } ,
{ data : fontDataDejaVuSansBoldItalic , bold : true , italic : true } ,
] ,
Roboto : [
// Different font versions for fontFamily "Roboto"
{ data : fontDataRobotoNormal } ,
{ data : fontDataRobotoMedium , bold : true } ,
] ,
} ,
content : [
{ text : 'lorem ipsum' , fontFamily : 'Roboto' , fontWeight : 'bold' } , // will use Roboto Medium
{ text : 'dolor sit amet' } , // will use DejaVu-Sans (the font registered first), normal
] ,
} ; Поддерживаются изображения JPG и PNG. Если одно и то же изображение используется более одного раза, данные изображения включаются в PDF-файл только один раз. Размер изображения можно ограничить с помощью свойств width и height .
// An image block
{ image : 'images/logo.png' , width : 200 , height : 100 } , Чтобы расположить блоки горизонтально, их можно включить в блок со свойством columns . Если столбцы имеют свойство width , оно учитывается. Оставшийся идентификатор пространства равномерно распределен по всем столбцам.
{
columns : [
{ text : 'Column 1' , width : 100 } , // 100 pt wide
{ text : 'Column 2' } , // gets half of the remaining width
{ text : 'Column 3' } , // gets half of the remaining width
] ,
}Макет строк можно использовать для группировки нескольких строк в один блок, например, для применения общих свойств или для включения строк в макет окружающих столбцов.
{
rows : [
{ text : 'Row 1' } ,
{ text : 'Row 2' } ,
{ text : 'Row 3' } ,
] ,
textAlign : 'right' ,
} Каждый блок может иметь свойство graphics , которое принимает список фигур для рисования в этом блоке, или функцию, возвращающую список фигур. Функция будет вызвана с указанием ширины и высоты блока. Это можно использовать для рисования фигур, которые зависят от размера блока.
Фигуры могут быть линиями, прямоугольниками, кругами или контурами SVG. В следующем примере свойство графики используется для рисования желтого фона позади текста и синей рамки у левого края.
{
text : 'Lorem ipsum' ,
graphics : ( { width , height } ) => [
{ type : 'rect' , x : 0 , y : 0 , width , height , fillColor : 'yellow' } ,
{ type : 'line' , x1 : 0 , y1 : 0 , x2 : 0 , y2 : height , lineColor : 'blue' , lineWidth : 2 } ,
] ,
padding : { left : 5 } ,
}Также см. графический пример.
Свойство margin можно использовать для добавления пространства вокруг блоков. Он принимает либо одно значение (применяется ко всем четырем краям), либо объект с любым из свойств top , right , bottom , left , x и y . Свойства x и y можно использовать в качестве сокращений для одновременной установки left и right или top и bottom значений. Значения могут быть заданы как числа (в точках) или как строки с единицей измерения. Если задана строка, она должна содержать одну из единиц измерения: pt , in , mm или cm ;
{
margin : { x : 5 , top : 10 } ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} top и bottom поля соседних блоков сворачиваются в одно поле, размер которого равен максимальному из двух полей. Поля столбца не сворачиваются.
Свойство padding можно использовать для добавления пространства между содержимым и краями блоков.
Свойство pageSize верхнего уровня можно использовать для установки размера страницы. Поддерживаются различные стандартные размеры, такие как A4 , Letter и Legal . По умолчанию — А4. Пользовательский размер страницы можно указать как объект со свойствами width и height . Значения могут быть заданы как числа (в точках) или как строки с единицей измерения.
{
pageSize : { width : '20cm' , height : '20cm' }
} Свойство pageOrientation можно использовать для установки ориентации страницы. Значение может быть portrait или landscape . По умолчанию — портрет.
{
pageSize : 'A5' ,
pageOrientation : 'landscape' ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} Верхние и нижние колонтитулы, которые повторяются на каждой странице, можно определить с помощью дополнительных свойств header и footer . Оба принимают либо один блок, либо функцию, возвращающую блок. Функция будет вызвана с номером страницы и общим количеством страниц. Номер страницы начинается с 1.
{
footer : ( { pageNumber , pageCount } ) => ( {
text : `Page ${ pageNumber } of ${ pageCount } ` ,
textAlign : 'right' ,
margin : { x : '20mm' , bottom : '1cm' } ,
} ) ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} Разрывы страниц включаются автоматически. Если блок не помещается на текущей странице, в документ добавляется новая страница. Чтобы вставить разрыв страницы до или после блока, установите для свойства блока breakBefore или breakAfter значение always . Чтобы предотвратить разрыв страницы, установите это свойство, чтобы avoid .
Разрывы страниц также автоматически вставляются между строками текстового блока. Чтобы предотвратить разрыв страницы внутри текстового блока, задайте для breakInside значение avoid .
{
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'This text will go on a new page' , breakBefore : 'always' } ,
] ,
} Хотя сгенерированная документация еще не создана, вы можете обратиться к папке API для спецификации всех поддерживаемых свойств в определении документа.
Также ознакомьтесь с примерами в папке example/.
Массачусетский технологический институт
