React-pdf: Outline is always null

[adamellsworth]

__Using__:

• Version "react-pdf": "^2.1.1",
• Browsers: All latest version of major browsers

When any PDF is loaded, including the example PDF that is on Mozilla's example page which clearly has a parsable outline, I'm seeing null.

the code below produces the following output:

__Console Output__

onLoadSuccess undefined
onParseSuccess {outline: null}

__Code__

import React, { Component, PropTypes as pt } from 'react';
import { Document, Outline, Page } from 'react-pdf/build/entry.webpack';

class Documents extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pdf: false
        };

        this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this);
    }

    onDocumentLoadSuccess (pdf) {
        this.setState({
            pdf: pdf
        });
    }

    render () {
        const { pdf } = this.state;

        return (<Document
            onLoadSuccess={this.onDocumentLoadSuccess}
            file={'./Sample.pdf'}>
                {pdf !== false ? <Outline
                    onLoadSuccess={(ol) => { console.log('onLoadSuccess', ol); }}
                    onLoadError={(ol) => { console.log('onLoadError', ol); }}
                    onParseError={(ol) => { console.log('onParseError', ol); }}
                    onParseSuccess={(ol) => { console.log('onParseSuccess', ol); }}
                    pdf={pdf}
                /> : null}
                {pdf !== false ? Array.from(
                    // Show the pages
                ) : null}
        </Document>);
    }
}

---

__Update 1:__ not sure if these are pertinent to the issue:

• pdf.getPageMode() yields a PromiseValue of UseNone
• pdf.getPageLabels() yields a PromiseValue of null

[wojtekmaj]

Hey @adamellsworth,
Sorry for the wait. That is interesting. Do you have this issue as well on my test suite?

[adamellsworth]

I am seeing most of the PDFs i've been testing with show their outlines in the DIV above the rendered document. What's the difference between master and this build?

Edit: nvm I see that the test pages are part of the repo. I'll reevaluate my implementation based on what you have provided.

[wojtekmaj]

Good :) I'll be happy to reopen if you stumble upon some problems. If documentation is not clear enough please let me know!

[alienintheheights]

Just a note that if the PDF itself has no outline, the Outline tag is correspondingly null. I was able to render the outline fine for documents that do have it using the basic tag:

<Document file={file} onLoadSuccess={this.onDocumentLoadSuccess}>
     <Outline />
</Document>

[fabripeco]

Hi! I'm bit confusing about the use of Outline. With the syntax below I'm not able to render the outline (no div in the DOM), no problems with the standard pages instead. I have a remote file and I supply URL to Document component

<Document file="http://..." onLoadSuccess={this.onDocumentLoadSuccess}>
        <Outline />
</Document>

pdf.getOutline() promise yields to null. Loading the same file to mozilla pdfjs demo https://mozilla.github.io/pdf.js/web/viewer.html the outline is present.
What does 'if the PDF itself has no outline' means?

Any idea? What am I wrong with?
Thank you for your help!

[wojtekmaj]

@fabripeco Your example looks very well. Can you provide the PDF in question so I could debug it?

[fabripeco]

Thank you very much!
Actually, outline is not visible for me with any file. I used also the example pdf in the mozilla demo
compressed.tracemonkey-pldi-09.pdf

Here's the complete code:

<Document
     className={styles.pdfViewer}
     renderMode="svg"
     file={http://}
     onLoadSuccess={this.onDocumentLoadSuccess}
>
         <Outline onLoadError={(e) => { console.log("error", e);}} onLoadSuccess={(pdf, e) => { console.log("success", pdf, e);}} onParseSuccess={(pdf, e) => { console.log("parse success", pdf, e);}} />

         <Page pageNumber={pageNumber} renderTextLayer={false} />

</Document>

The same leaving Page component away.

react-pdf v 4.0.5
react v16.8.3
pdf.js from CDN (https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.worker.js)

Thanks!

[wojtekmaj]

@fabripeco In PDF.js demo there's no outline as well. Maybe you confused Outline (list of headings) with page thumbnails?

[fabripeco]

You are right, it was a language misunderstanding, so sorry :(
I need a thumbnail preview in the sidebar. I guess the only way is to re-render the document with the full list of pages inside, like in your demo. Is it the right way in your opinion?

[wojtekmaj]

Yes, that's absolutely correct. Just bear 🐻 in mind that React-PDF does not provide a solution to manage performance. If you tell it to render 130 pages at once it will do it, and likely kill your browser. Check #94 to discuss potential solutions to this problem.

[fabripeco]

Thank you for your help @wojtekmaj!

[rjacain]

I know this is an old post if you want a thumbnail feature made out of react-pdf your can reuse the "<Document> <Page /> </Document> "by for looping it according to number of pages and returned it to render in react renderer by using your existing hooks for next and previous page you can utilize the thumbnail function the only problem that I encounter in react pdf is the bookmarking the rest of the functions are perfectly working