pdf maker

PDF製作工具

PDF Maker 是一個用 JavaScript 產生 PDF 文件的函式庫。

• 易於使用：內容在普通物件中定義。
• 可在任何地方工作：瀏覽器、Node.js、Deno 和 Bun。
• TypeScript 支援：類型包含在 npm 套件中。

該專案受到 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屬性時，它會受到尊重。剩餘空間 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 資料夾以取得文檔定義中所有支援的屬性的規格。

另請查看範例/資料夾中的範例。

執照

麻省理工學院