How to make a table of contents using pdfmake?

Question

Is it possible to make a table of content (TOC) using pdfmake? The library will generate the PDF for me but I have no idea on which page a certain object will be rendered. Of course this depends on page size, orientation, etc. Some content will flow to a next page. I can't see how to calculate in advance where a chapter ends up.

Consider this document definition:

var dd = {
    footer: function(currentPage, pageCount) { return currentPage.toString() + ' of ' + pageCount; },
    content: [
        'Table of contents\n\n',
        'Chapter 1 ....... ?',
        'Chapter 2 ....... ?',
        'Chapter 3 ....... ?',
        'Chapter 4 ....... ?',
        {
            text: '',
            pageBreak: 'after'
        },
        {
            text: 'Chapter 1: is on page 2',
            pageBreak: 'after'
        },
        {
            stack: [
                'Chapter 2: is on page 3\n',
                'A LOT OF ROWS 2\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n',
                'A LOT OF ROWS 2\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n',
                'A LOT OF ROWS 2\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n',
                'A LOT OF ROWS 2\nWill go to the next page if this line contains a lot of text. Will go to the next page if this line contains a lot of text. Will go to the next page if this line contains a lot of text.'
                ],
            pageBreak: 'after'
        },
        {
            text: 'chapter 3: is on page 5',
            pageBreak: 'after'
        },
        {
            text: 'chapter 4: is on page 6'
        },
  ]
}

The most easy wat to test is to paste this dd object in the playground: http://pdfmake.org/playground.html

Any ideas on how to create a TOC?

score 8 · Accepted Answer · answered May 06 '17 at 15:03

While this wasn't supported till recently you can now do

var docDefinition = {
  content: [
    {
      toc: {
        // id: 'mainToc'  // optional
        title: {text: 'INDEX', style: 'header'}
      }
    },
    {
      text: 'This is a header',
      style: 'header',
      tocItem: true, // or tocItem: 'mainToc' if is used id in toc
      // or tocItem: ['mainToc', 'subToc'] for multiple tocs
    }
  ]
}

Source: https://github.com/bpampuch/pdfmake#table-of-contents

Please note that this is not yet in the recent 0.1.28 release. But I guess it will be included in the next one and meanwhile you can easily build from source:

git clone https://github.com/bpampuch/pdfmake.git
cd pdfmake
npm install # or: yarn
git submodule update --init  libs/FileSaver.js
npm run build # or: yarn run build

Source: https://github.com/bpampuch/pdfmake#building-from-sources

I can confirm that the above ToC example is functional in that case as long as you have at least one tocItem. Zero tocItems and a toc will currently throw an exception due to the empty ToC table.

What a lifesaver! And you can also add the TOC inside any contents structure, e.g. `contents: [{ columns: [ { toc: { id, title, etc... }} ] }]` — Ricky Boyce, Jul 10 '23 at 02:41

How to make a table of contents using pdfmake?

1 Answers1