react-pdf-viewer icon indicating copy to clipboard operation
react-pdf-viewer copied to clipboard

Add a props to ViewerProps who allow to load the full content of a document in the very first render

Open LucaHermann opened this issue 4 years ago • 0 comments

It should be very useful to have a props who allow to load and render the whole document content in the very first render for many reason. So you should add a Boolean props forceLoadingDocument to ViewerProps for allow this instead of loading a certain amount of page and let the rest with the class rpv-core-spinner.

export interface ViewerProps {
    characterMap?: CharacterMap;
    // The default zoom level
    // If it's not set, the initial zoom level will be calculated based on the dimesion of page and the container width
    // So that, the document will fit best within the container
    defaultScale?: number | SpecialZoomLevel;
    fileUrl: string | Uint8Array;
    forceLoadDocument: Boolean;
    // Additional authentication headers
    httpHeaders?: Record<string, string | string[]>;
    // The page (zero-index based) that will be displayed initially
    initialPage?: number;
    // Plugins
    plugins?: Plugin[];
    localization?: LocalizationMap;
    renderError?: RenderError;
    renderPage?: RenderPage;
    renderLoader?(percentages: number): React.ReactElement;
    // Theme
    theme?: string;
    transformGetDocumentParams?(options: PdfJs.GetDocumentParams): PdfJs.GetDocumentParams;
    // Indicate the cross-site requests should be made with credentials such as cookie and authorization headers.
    // The default value is `false`
    withCredentials?: boolean;
    onDocumentLoad?(e: DocumentLoadEvent): void;
    onPageChange?(e: PageChangeEvent): void;
    // Invoked after switching to `theme`
    onSwitchTheme?(theme: string): void;
    onZoom?(e: ZoomEvent): void;
}

This behavior is very helpful for be able to seek into all the pages without having to do this for have it.

  const onDocumentLoad = () => {
    // to force the render of each page in the DOM
    // (100ms seems to be OK, less can be not sufficient on large pdf file)
    let pageDiv = pdfRef.current.children[0].children[0].children[0]
    pageDiv.scrollTop = pageDiv.scrollHeight
    setTimeout(() => {
      pageDiv.scrollTop = 0
    }, 100)
  }

Best regards, Luca.

LucaHermann avatar Aug 06 '21 06:08 LucaHermann