Skip to content

README.md

Latest commit

 

History

History
55 lines (40 loc) · 2.55 KB

README.md

File metadata and controls

55 lines (40 loc) · 2.55 KB

Summary of PDFViewerCanvas React Component

The PDFViewerCanvas component is used for rendering a PDF document onto a canvas and includes navigation through the PDF pages. It provides loading, error handling, and navigation functionalities, making it flexible for displaying PDF files with page navigation controls.

Key Features:

  1. PDF Loading and Rendering: Uses pdfjsLib to fetch and render a PDF onto an HTML5 canvas.
  2. Navigation: Includes navigation between pages using the DifferenceNavigation component.
  3. Error Handling: Displays an error message if the PDF fails to load.
  4. Loading Indicator: A loading spinner is displayed while the PDF is being fetched and rendered.
  5. Customizable Canvas Attributes: Accepts additional attributes for customization, like CSS classes and style properties.

State Variables:

  • loading: A boolean indicating if the PDF is still loading.
  • numberOfPages: The total number of pages in the PDF.
  • currentPage: Tracks the current page being rendered.
  • errorMessage: Holds any error message in case the PDF fails to load.

Props:

  • src: The source URL or file for the PDF document.
  • className: An optional class name for styling the canvas.
  • documentName: The name of the document, used for slugifying the id of the canvas.
  • pageNumber: The page number to display initially (default: 1).
  • showNavigation: A boolean to control whether navigation is displayed (default: true).
  • ...attributes: Additional attributes passed to the canvas element.

Main Functional Logic:

  • PDF Fetching:
    • The loadPDF function fetches the PDF using the pdfjsLib.getDocument() method.
    • The PDF is rendered using renderPage() which takes the page number, fetches the respective page, and draws it on the canvas.
  • Page Rendering Queue:
    • The queueRenderPage method ensures that pages are rendered sequentially, preventing multiple render operations from overlapping.

Error and Loading Handling:

  • The component shows a loading indicator while the PDF is fetched, and an error message if the PDF fails to load.

Example Usage:

<PDFViewerCanvas
  src="/path/to/pdf/document.pdf"
  className="pdf-viewer"
  documentName="example-document"
  pageNumber={1}
  showNavigation={true}
/>

Conclusion:

This component is well-suited for use cases where PDFs need to be viewed on a webpage with navigation between pages. It includes a flexible interface and handles common scenarios such as loading, error states, and navigating through multiple pages.