PDF Maker는 JavaScript로 PDF 문서를 생성하기 위한 라이브러리입니다.
이 프로젝트는 pdfmake에서 영감을 얻었으며 pdf-lib 및 글꼴 키트를 기반으로 합니다. 해당 프로젝트의 작성자가 기여한 위대한 작업과 심오한 지식이 없었다면 존재하지 않았을 것입니다.
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 ) ;예제/ 폴더에 더 많은 예제가 있습니다.
모든 글꼴은 PDF에 포함되어 있으며 fonts 속성에 등록되어야 합니다. 글꼴 데이터는 ArrayBuffer 또는 Uint8Array와 같이 .ttf 또는 .otf 형식으로 허용됩니다. 각 글꼴 모음에는 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 속성이 있는 경우 해당 속성이 적용됩니다. 나머지 공간 ID는 모든 열에 균등하게 분배됩니다.
{
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) 또는 단위가 포함된 문자열로 제공될 수 있습니다. 문자열이 제공되면 pt , in , mm 또는 cm 단위 중 하나를 포함해야 합니다.
{
margin : { x : 5 , top : 10 } ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
} 인접한 블록의 top 및 bottom 여백은 크기가 두 여백의 최대값인 단일 여백으로 축소됩니다. 열 여백은 축소되지 않습니다.
padding 속성을 사용하여 콘텐츠와 블록 가장자리 사이에 공간을 추가할 수 있습니다.
최상위 pageSize 속성을 사용하여 페이지 크기를 설정할 수 있습니다. A4 , Letter , Legal 등 다양한 표준 크기가 지원됩니다. 기본값은 A4입니다. 사용자 정의 페이지 크기는 width 및 height 속성을 가진 객체로 지정할 수 있습니다. 값은 숫자(pt) 또는 단위가 포함된 문자열로 제공될 수 있습니다.
{
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/ 폴더의 예제도 확인해 보세요.
MIT
