javascript - How to make a table of contents using pdfmake? - Stack Overflow

admin管理员组

文章数量:1313599

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: .html

Any ideas on how to create a TOC?

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/playground.html

Any ideas on how to create a TOC?

• javascript
• pdfmake

Share Improve this question Follow asked Apr 12, 2016 at 15:41 Paul KokPaul Kok 10111 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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./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./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./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.

本文标签： javascriptHow to make a table of contents using pdfmakeStack Overflow