Is there any way to add outline to text with destinations, so that it can viewed in getOutline of ng2-pdf-viewer

Question

To display the outlines using ng2-pdf-viewer in which the pdf is generated using the pdfmake library. Is there any options to put some text as outline text in pdfmake while definnig the document definition?

Answer 1

Iff we know the titles that need to be outlined. The solution after all implemented for this functionality is using the Toc (Table of contents)

Define the document defintion like this :

generatePDF(): Promise<any>{
  this.documentDefinition = {
    content: [
     {
      tocItem: 'coverpage',
      stack: [
        {
          columns: [
            {
              text: '',
              width: '50%',
              tocItem: true,
            },
            {
              width: '*',
              text: ''
            }
          ]
        }
      ]
      pageBreak: 'after',
    },
    {
      text: 'Second toc header',
      tocItem: true,
      pageBreak: 'after',
      bold: true,
    }
   ]
}
// generate 
this.generatedPDF = pdfMake.createPdf(this.documentDefinition)
this.generatedPDF.getBuffer((buffer) => {
    this.pdfSrc = buffer
})
}

On after load of the ng2-pdf-viewer use :

afterLoadComplete(pdf: PDFDocumentProxy): void {
   this.pdf = pdf
   const toc = this.generatedPDF.docDefinition.content.filter( content => 
   content.toc)
   this.loadOutline(toc)
}

loadOutline(toc: any): void {
  const outlineTitles = [
    'item 1',
    'item 2',
    'item 3',
    'item 4'
  ]
  this.pdf.getDestinations().then((outline: any[]) => {
     this.outline = Object.entries(outline).map( (item, index) => 
     Object.assign(item, {title : outlineTitles[index]}))
  })
}

Thus the titles with the destinations will be got.