Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/natancabral/natancabral-pdfkit-table

Helps to draw informations in simple tables using pdfkit. #server-side. Generate pdf tables with javascript (PDFKIT plugin)
https://github.com/natancabral/natancabral-pdfkit-table
pdf pdf-table pdfkit pdfkit-table server-side
Last synced: about 1 month ago
JSON representation
Helps to draw informations in simple tables using pdfkit. #server-side. Generate pdf tables with javascript (PDFKIT plugin)
Host: GitHub
URL: https://github.com/natancabral/natancabral-pdfkit-table
Owner: natancabral
License: mit
Created: 2021-06-17T20:07:52.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-05-04T14:50:09.000Z (over 2 years ago)
Last Synced: 2024-11-12T04:36:42.781Z (about 2 months ago)
Topics: pdf, pdf-table, pdfkit, pdfkit-table, server-side
Language: JavaScript
Homepage:
Size: 7.44 MB
Stars: 2
Watchers: 1
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        


  


  


  

  


  




# natancabral-pdfkit-table

#### Generate pdf tables with javascript (PDFKIT plugin)

Helps to draw informations in simple tables using pdfkit. #server-side.

## Examples

[view pdf example](https://github.com/natancabral/natancabral-pdfkit-table/raw/main/example/document.pdf) | 

[color pdf](https://github.com/natancabral/natancabral-pdfkit-table/raw/main/example/document-color.pdf) | 

[full code example](https://github.com/natancabral/natancabral-pdfkit-table/blob/main/example/index-example.js) |

[server example](https://github.com/natancabral/natancabral-pdfkit-table/blob/main/example/index-server-example.js) |

[json example](https://github.com/natancabral/natancabral-pdfkit-table/blob/main/example/index-json-example.js) |

[all](https://github.com/natancabral/natancabral-pdfkit-table/blob/main/example/)



## Install [](https://www.npmjs.com/package/natancabral-pdfkit-table)

[![NPM](https://nodei.co/npm/natancabral-pdfkit-table.png)](https://www.npmjs.com/package/natancabral-pdfkit-table)

```bash

npm install natancabral-pdfkit-table

```

## Use

```js

  // requires

  const fs = require("fs");

  const PDFDocument = require("natancabral-pdfkit-table");  

  // create document

  let doc = new PDFDocument({ margin: 30, size: 'A4' });

  // file name

  doc.pipe(fs.createWriteStream("./document.pdf"));

  

  // table

  const table = { 

    title: '',

    headers: [],

    datas: [ /* complex data */ ],

    rows: [ /* or simple data */ ],

  }

  // the magic

  doc.table( table, { /* options */ }, () => { /* callback */ } );

  // doc.table() is a Promise to async/await function 

  // if your run express.js server

  // to show PDF on navigator

  // doc.pipe(res);

  // done!

  doc.end();

```

## Server response

[server example](https://github.com/natancabral/natancabral-pdfkit-table/blob/main/example/index-server-example.js)

```js

  app.get('/create-pdf', (req, res) => {

    // ...table code

    // if your run express.js server

    // to show PDF on navigator

    doc.pipe(res);

    // done!

    doc.end();

  });

```

### Example 1 - Simple Array

```js

  // requires 

  const table = {

    title: "Title",

    subtitle: "Subtitle",

    headers: ["Country", "Conversion rate", "Trend"],

    rows: [

      ["Switzerland", "12%", "+1.12%"],

      ["France", "67%", "-0.98%"],

      ["England", "33%", "+4.44%"],

    ],

  };

  doc.table( table, { 

    // A4 595.28 x 841.89 (portrait) (about width sizes)

    width: 300,

    //columnsSize: [ 200, 100, 100 ],

  }); 

  // end code

```

### Example 2 - Table

```js

  // require

  // A4 595.28 x 841.89 (portrait) (about width sizes)

  const table = {

    title: "Title",

    subtitle: "Subtitle",

    headers: [

      { label:"Name", property: 'name', width: 60, renderer: null },

      { label:"Description", property: 'description', width: 150, renderer: null }, 

      { label:"Price 1", property: 'price1', width: 100, renderer: null }, 

      { label:"Price 2", property: 'price2', width: 100, renderer: null }, 

      { label:"Price 3", property: 'price3', width: 80, renderer: null }, 

      { label:"Price 4", property: 'price4', width: 43, 

        renderer: (value, indexColumn, indexRow, row) => { return `U$ ${Number(value).toFixed(2)}` } 

      },

    ],

    // complex data

    datas: [

      { 

        name: 'Name 1', 

        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis ante in laoreet egestas. ', 

        price1: '$1', 

        price3: '$ 3', 

        price2: '$2', 

        price4: '4', 

      },

      { 

        options: { fontSize: 10, separation: true},

        name: 'bold:Name 2', 

        description: 'bold:Lorem ipsum dolor.', 

        price1: 'bold:$1', 

        price3: { 

          label: 'PRICE $3', options: { fontSize: 12 } 

        }, 

        price2: '$2', 

        price4: '4', 

      },

      // {...},

    ],

    // simeple data

    rows: [

      [

        "Apple",

        "Nullam ut facilisis mi. Nunc dignissim ex ac vulputate facilisis.",

        "$ 105,99",

        "$ 105,99",

        "$ 105,99",

        "105.99",

      ],

      // [...],

    ],

  };

  doc.table(table, {

    prepareHeader: () => doc.font("Helvetica-Bold").fontSize(8),

    prepareRow: (row, indexColumn, indexRow, rectRow, rectCell) => {

      doc.font("Helvetica").fontSize(8);

      indexColumn === 0 && doc.addBackground(rectRow, 'blue', 0.15);

    },

  });

```

### Example 3 - Json

```js

// renderer function inside json file

const tableJson = '{ 

  "headers": [

    { "label":"Name", "property":"name", "width":100 },

    { "label":"Age", "property":"age", "width":100 },

    { "label":"Year", "property":"year", "width":100 }

  ],

  "datas": [

    { "name":"bold:Name 1", "age":"Age 1", "year":"Year 1" },

    { "name":"Name 2", "age":"Age 2", "year":"Year 2" },

    { "name":"Name 3", "age":"Age 3", "year":"Year 3",

        "renderer": "function(value, i, irow){ return value + `(${(1+irow)})`; }"

    }

  ],

  "rows": [

    ["Name 4", "Age 4", "Year 4"]

  ],

  "options": {

    "width": 300

  }

}';

doc.table( tableJson );

```

### Example 4 - Json file (many tables)

```js

const json = require('./table.json');

// if json file is array

Array.isArray(json) ? 

// any tables

json.forEach( table => doc.table( table, table.options || {} ) ) : 

// one table

doc.table( json, json.options || {} ) ;

```

## Table

- Array.<object> | JSON

  - headers Array.<object> | Array.[]

    - label String

    - property String

    - width Number

    - align String

    - valign String

    - headerColor String

    - headerOpacity Number

    - headerAlign String

    - columnColor or backgroundColor String

    - columnOpacity or backgroundOpacity: Number

    - renderer Function function( value, indexColumn, indexRow, row, rectRow, rectCell ) { return value }

  - datas Array.<object>

  - rows Array.[]

  - title String || Object

  - subtitle String || Object

### Headers

| Properties           | Type                  | Default            | Description       |

-----------------------|-----------------------|--------------------|-------------------|

| **label**            | String   | undefined          | description       |

| **property**         | String   | undefined          | id                |

| **width**            | Number   | undefined          | width of column   |

| **align**            | String   | left               | alignment         |

| **valign**           | String   | undefined          | vertical alignment. ex: valign: "center"|

| **headerColor**      | String   | grey or #BEBEBE    | color of header   |

| **headerOpacity**    | Number   | 0.5                | opacity of header |

| **headerAlign**      | String   | left               | only header       |

| **columnColor** or backgroundColor  | String   | undefined          | color of column   |

| **columnOpacity** or backgroundOpacity| Number   | undefined          | opacity of column   |

| **renderer**         | Function | Function           | function( value, indexColumn, indexRow, row, rectRow, rectCell ) { return value } |

#### Simple headers example

```js

const table = {

  // simple headers only with ROWS (not DATAS)  

  headers: ['Name', 'Age'],

  // simple content

  rows: [

    ['Jack', '32'], // row 1

    ['Maria', '30'], // row 2

  ]

};

```

#### Complex headers example

```js

const table = {

  // complex headers work with ROWS and DATAS  

  headers: [

    { label:"Name", property: 'name', width: 100, renderer: null },

    { label:"Age", property: 'age', width: 100, renderer: (value) => `U$ ${Number(value).toFixed(1)}` },

  ],

  // complex content

  datas: [

    { name: 'bold:Jack', age: 32, },

    // age is object value with style options

    { name: 'Maria', age: { label: 30 , options: { fontSize: 12 }}, },

  ],

  // simple content (works fine!)

  rows: [

    ['Jack', '32'], // row 1

    ['Maria', '30'], // row 2

  ]

};

```

### Options

| Properties           | Type                  | Default            | Description       |

-----------------------|-----------------------|--------------------|-------------------|

| **title**            | String | Object   | undefined          | title             |

| **subtitle**         | String | Object   | undefined          | subtitle          |

| **width**            | Number   | undefined          | width of table    |

| **x**                | Number   | undefined / doc.x  | position x (left) |

| **y**                | Number   | undefined / doc.y  | position y (top)  |

| **divider**          | Object   | undefined          | define divider lines |

| **columnsSize**      | Array    | undefined          | define sizes      |

| **columnSpacing**    | Number   | 5                  |                   |

| **addPage**          | Boolean  | false              | add table on new page |

| **hideHeader**       | Boolean  | false              | hide header |

| **prepareHeader**    | Function | Function           | ()                  |

| **prepareRow**       | Function | Function           | (row, indexColumn, indexRow, rectRow, rectCell) => {} |

#### Options example

```js

const options = {

  // properties

  title: "Title", // { label: 'Title', fontSize: 30, color: 'blue', fontFamily: "./fonts/type.ttf" },

  subtitle: "Subtitle", // { label: 'Subtitle', fontSize: 20, color: 'green', fontFamily: "./fonts/type.ttf" },

  width: 500, // {Number} default: undefined // A4 595.28 x 841.89 (portrait) (about width sizes)

  x: 0, // {Number} default: undefined | doc.x

  y: 0, // {Number} default: undefined | doc.y

  divider: {

    header: {disabled: false, width: 2, opacity: 1},

    horizontal: {disabled: false, width: 0.5, opacity: 0.5},

  },

  padding: 5, // {Number} default: 0

  columnSpacing: 5, // {Number} default: 5

  hideHeader: false, 

  // functions

  prepareHeader: () => doc.font("Helvetica-Bold").fontSize(8), // {Function} 

  prepareRow: (row, indexColumn, indexRow, rectRow, rectCell) => doc.font("Helvetica").fontSize(8), // {Function} 

}

```

#### Options Row

- separation {Booleon}

- fontSize {Number}

- fontFamily {String}

```js

datas: [

  // options row

  { name: 'Jack', options: { fontSize: 10, fontFamily: 'Courier-Bold', separation: true } },

]

``` 

- String

  - **bold:** 

    - 'bold:Jack'

  - **size{n}:** 

    - 'size11:Jack'

    - 'size20:Jack'

```js

datas: [

  // bold

  { name: 'bold:Jack' },

  // size{n}

  { name: 'size20:Maria' },

  { name: 'size8:Will' },

  // normal

  { name: 'San' },

]

``` 

#### Options Cell

- fontSize {Number}

- fontFamily {String}

```js

datas: [

  // options cell | value is object | label is string

  { name: { label: 'Jack', options: { fontSize: 10, fontFamily: 'Courier-Bold' } },

]

``` 

#### Fonts Family

- Courier

  - Courier-Bold

  - Courier-Oblique

  - Courier-BoldOblique

- Helvetica

  - Helvetica-Bold

  - Helvetica-Oblique

  - Helvetica-BoldOblique

- Symbol

- Times-Roman

  - Times-Bold

  - Times-Italic

  - Times-BoldItalic

- ZapfDingbats

## ToDo

- [Suggestions / Issues / Fixes](https://github.com/natancabral/natancabral-pdfkit-table/issues)

- striped {Boolean} (corsimcornao)

- colspan - the colspan attribute defines the number of columns a table cell should span.

- sample with database

- margin: marginBottom before, marginTop after

## Changelogs

### 0.1.88

- Fix header font family or title object

  - Thanks ***@RastaGrzywa***

```js

let localType = "./font/Montserrat-Regular.ttf";

const table = {

  title: { label: 'Title Object 2', fontSize: 30, color: 'blue', fontFamily: localType },

}

```

### 0.1.87

- Add options hideHeader

  - Thanks Ville ***@VilleKoo***

```js

  options: {

    hideHeader: true,

  }

```

### 0.1.83

- Avoid a table title appearing alone

  - Thanks Alexis Arriola ***@AlexisArriola***

- Problem with long text in cell spreading on several pages

  - Thanks Ed ***@MeMineToMe***

### 0.1.72

- Add ***Divider Lines*** on options

```js

  options: {

    // divider lines

    divider: {

      header: {disabled: false, width: 0.5, opacity: 0.5},

      horizontal: {disabled: true, width: 0.5, opacity: 0.5},

    },

  }

```

  - Thanks Luc Swart ***@lucswart***

### 0.1.70

+ Fix ***y*** position.

  - Thanks Nabil Tahmidul Karim ***@nabiltkarim***

### 0.1.68

+ Added ***Promise***. table is a Promise();

  - Async/Await function 

```js

;(async function(){

  // create document

  const doc = new PDFDocument({ margin: 30, });

  // to save on server

  doc.pipe(fs.createWriteStream("./my-table.pdf"));

  // tables

  await doc.table(table, options);

  await doc.table(table, options);

  await doc.table(table, options);

  // done

  doc.end();

})();

```

+ Added ***callback***. 

```js

  doc.table(table, options, callback);

```

### 0.1.63

+ Added ***valign*** on headers options. (ex: valign:"center")

+ Added ***headerAlign***, alignment only to header.

  ```js

  headers: [

    {label:"Name", property:"name", valign: "center", headerAlign:"right", headerColor:"#FF0000", headerOpacity:0.5 }

  ]

  ```

  - Thanks ***@DPCLive***

### 0.1.60

+ Add callback on addBackground function, add .save() and .restore() style.

+ Header font color

  - Thanks ***@dev-fema***

### 0.1.59

+ Add padding

### 0.1.57

+ Header color and opacity

  ```js

  headers: [

    {label:"Name", property:"name", headerColor:"#FF0000", headerOpacity:0.5 }

  ]

  ```

  - Thanks ***Albert Taveras*** @itsalb3rt

### 0.1.55

+ Align on headers

  ```js

  headers: [

    {label:"Name", property:"name", align:"center"}

  ]

  ```

  - Thanks ***Andrea Fucci***

### 0.1.49

+ Max size page

### 0.1.48

+ Header height size

+ Separate line width

### 0.1.47

+ addHeader() function on all add pages

  - Thanks Anders Wasen ***@QAnders***

### 0.1.46

+ addBackground() function to node 8

  - Thanks ***@mehmetunubol***

### 0.1.45

+ Add **rectCell** on renderer

  - renderer = ( value, indexColumn, indexRow, row, rectRow, rectCell ) => {}

  - Thanks ***Eduardo Miranda***

### 0.1.44

+ Fix paddings and distances

### 0.1.43

+ Remove **rowSpacing**

+ Fix **columnSpacing**

### 0.1.41

+ **Background** color on header to colorize ***column***

  - headers: [

      { label:"Name", property: 'name', ***backgroundColor: 'red', backgroundOpacity: 0.5*** },

      { label:"Age", property: 'age', ***background: { color: 'green', opacity: 0.5 } }***,

  ]

+ **Background** color inside row options datas

  - datas: [

      { name:"My Name", age: 20, ***options: { backgroundColor: 'red', backgroundOpacity: 0.5 }*** },

      { name:"My Name", age: 20, ***options: { background: { color: 'green', opacity: 0.5 } }*** },

  ]

+ **Background** color inside cell options datas

  - datas: [

      { name:{ label: "My Name", age: 20, ***options: { backgroundColor: 'red', backgroundOpacity: 0.5 }*** }},

      { name:{ label: "My Name", age: 20, ***options: { background: { color: 'green', opacity: 0.5 } }*** }},

  ]

### 0.1.39

+ **addBackground**  {Function} - Add background peer line. 

  - doc.addBackground( {x, y, width, height}, fillColor, opacity, callback );

+ **prepareRow**  {Function}

  - const options = { prepareRow: (row, indexColumn, indexRow, rectRow, rectCell) => { indexColumn === 0 && doc.addBackground(rectRow, 'red', 0.5) } }

### 0.1.38

+ **tables**  {Function} - Add many tables. 

  - doc.tables([ table0, table1, table2, ... ]);

### 0.1.37

+ **addPage**  {Boolean} - Add table on new page.

  - const options = { addPage: true, }; 

### 0.1.36

+ Fix position x, y of title

+ **options.x**: **null** | **-1** // reset position to margins.left

### 0.1.35

+ add **title** {String}

  - const table = { title: "", };

  - const options = { title: "", };

+ add **subtitle** {String}

  - const table = { subtitle: "", };

  - const options = { subtitle: "", };

### 0.1.34

+ add **columnsSize** on options = {} // only to simple table

### 0.1.33

+ Function **tableToJson**

  - import {tableToJson} from 'natancabral-pdfkit-table';

  - const table = tableToJson('#id_table'); {Object}

+ Function **allTablesToJson**

  - import {allTablesToJson} from 'natancabral-pdfkit-table';

  - const tables = allTablesToJson(); {Array}

### 0.1.32

+ spacing cell and header alignment

+ **Thank you, contributors!**

### 0.1.31

+ renderer function on json file. { "renderer": "function(value, icol, irow, row){ return (value+1) + `(${(irow+2)})`; }" }

+ fix width table and separation lines size 

## License

The MIT License.

## Author

  

    

      

    

    

      Natan Cabral


      [email protected]


      https://github.com/natancabral/

    

  

## Thank you

- pdfkit - [pdfkit](https://www.npmjs.com/package/pdfkit)

- ideas - [giuseppe-santoro](https://github.com/foliojs/pdfkit/issues/29#issuecomment-56504943)