PDF Maker は、JavaScript で PDF ドキュメントを生成するためのライブラリです。
このプロジェクトは 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プロパティに登録する必要があります。フォント データは、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 内に 1 回だけ含まれます。画像のサイズは、 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
] ,
}行レイアウトを使用すると、複数の行を 1 つのブロックにグループ化することができます。たとえば、共通のプロパティを適用したり、周囲の列レイアウトで行を囲んだりすることができます。
{
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プロパティを使用すると、ブロックの周囲にスペースを追加できます。単一の値 (4 つのエッジすべてに適用)、またはtop 、 right 、 bottom 、 left 、 x 、およびyのいずれかのプロパティを持つオブジェクトを受け入れます。プロパティxとy bottom left right top設定する短縮表現として使用できます。値は数値 (pt 単位) または単位付きの文字列として指定できます。文字列を指定する場合は、 pt 、 in 、 mm 、 cmのいずれかの単位を含める必要があります。
{
margin : { x : 5 , top : 10 } ,
content : [
{ text : 'Lorem ipsum' } ,
{ text : 'dolor sit amet' } ,
] ,
}隣接するブロックのtop bottomマージンは、2 つのマージンの最大サイズとなる 1 つのマージンに折りたたまれます。列の余白は崩れません。
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 フォルダーを参照できます。
また、examples/ フォルダー内の例も確認してください。
マサチューセッツ工科大学
