React-pdf: Make it easier to display all pages

Created on 4 Feb 2019 · 9Comments · Source: wojtekmaj/react-pdf

Before you start - checklist

[x] I understand that React-PDF does not aim to be a fully-fledged PDF viewer and is only a tool to make one
[x] I have checked if this feature request is not already reported

Is your feature request related to a problem? Please describe.

It should be easy to display all PDF pages at once, as suggested in #98.

Describe the solution you'd like

<AllPages /> component? Better documentation? Optional render props that allows to iterate through all pages?

enhancement

Source

wojtekmaj

All 9 comments

Hello @wojtekmaj , Any chance with this component to display all pages ?

thanks.

qaisershehzad on 18 Feb 2019

@qaisershehzad Not right now. Busy in private life, and with budget of $0 I need to prioritize to make a living :)

wojtekmaj on 18 Feb 2019

😕3

Thanks @wojtekmaj for your quick response :)

I have reported another issue #355 am facing if you can help or guide would be nice.

qaisershehzad on 18 Feb 2019

After consideration I've decided not to put this AllPages component into core React-PDF. Here's why:

Including well built, performant AllPages component would require building a solution using third party tools like React-Window. This would likely cause developers to use AllPages instead of whatever solutions they are already using for lazy loading components. Building AllPages component that would work well with React-Window and other similar libraries would be super hard, if not impossible to do.

I'll be more than happy to see React-PDF based extensions, which use react-pdf API to provide additional functionalities.

Here's <AllPages /> implementation, without any external libraries which would delay loading pages until it's needed, that you can base your work on:

import React, { PureComponent } from 'react';

import DocumentContext from 'react-pdf/dist/DocumentContext';
import { PageInternal } from 'react-pdf/dist/Page';

export class AllPagesInternal extends PureComponent {
  componentDidMount() {
    const { pdf } = this.props;

    if (!pdf) {
      throw new Error('Attempted to load a page, but no document was specified.');
    }
  }

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

    const { numPages } = pdf;

    return (
      Array.from(
        new Array(numPages),
        (el, index) => (
          <PageInternal
            {...this.props}
            key={`page_${index + 1}`}
            pageNumber={index + 1}
          />
        ),
      )
    );
  }
}


const { pageIndex, pageNumber, ...allPagesInternalPropTypes } = PageInternal.propTypes;

AllPagesInternal.propTypes = {
  ...allPagesInternalPropTypes,
};

const AllPages = props => (
  <DocumentContext.Consumer>
    {context => (
      <AllPagesInternal
        {...context}
        {...props}
        // For backwards compatibility
        renderAnnotationLayer={
          typeof props.renderAnnotationLayer !== 'undefined'
            ? props.renderAnnotationLayer
            : props.renderAnnotations
        }
      />
    )}
  </DocumentContext.Consumer>
);

export default AllPages;

As you can see, render function is just an array based on numPages, which we then map on. This makes it rather easy to make it work with React-Window or React-Virtualized.

wojtekmaj on 3 May 2019

I think AllPages is quite necessary, many other file like ppt,excel can be transffed to be pdf, they should be display multi pages.

amyhuangxbd on 24 Jul 2019

@wojtekmaj Hi, how to scroll to the specified page num

amyhuangxbd on 24 Jul 2019

After consideration I've decided not to put this AllPages component into core React-PDF. Here's why:

Including well built, performant AllPages component would require building a solution using third party tools like React-Window. This would likely cause developers to use AllPages instead of whatever solutions they are already using for lazy loading components. Building AllPages component that would work well with React-Window and other similar libraries would be super hard, if not impossible to do.

I'll be more than happy to see React-PDF based _extensions_, which use react-pdf API to provide additional functionalities.

Here's <AllPages /> implementation, without any external libraries which would delay loading pages until it's needed, that you can base your work on:
import React, { PureComponent } from 'react';

import DocumentContext from 'react-pdf/dist/DocumentContext';
import { PageInternal } from 'react-pdf/dist/Page';

export class AllPagesInternal extends PureComponent {
  componentDidMount() {
    const { pdf } = this.props;

    if (!pdf) {
      throw new Error('Attempted to load a page, but no document was specified.');
    }
  }

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

    const { numPages } = pdf;

    return (
      Array.from(
        new Array(numPages),
        (el, index) => (
          <PageInternal
            {...this.props}
            key={`page_${index + 1}`}
            pageNumber={index + 1}
          />
        ),
      )
    );
  }
}


const { pageIndex, pageNumber, ...allPagesInternalPropTypes } = PageInternal.propTypes;

AllPagesInternal.propTypes = {
  ...allPagesInternalPropTypes,
};

const AllPages = props => (
  <DocumentContext.Consumer>
    {context => (
      <AllPagesInternal
        {...context}
        {...props}
        // For backwards compatibility
        renderAnnotationLayer={
          typeof props.renderAnnotationLayer !== 'undefined'
            ? props.renderAnnotationLayer
            : props.renderAnnotations
        }
      />
    )}
  </DocumentContext.Consumer>
);

export default AllPages;
As you can see, render function is just an array based on numPages, which we then map on. This makes it rather easy to make it work with React-Window or React-Virtualized.

How to link pdf file? It is throwing an Error: Attempted to load a page, but no document was specified.