SharePoint  

How to Display a PDF in an SPFx Web Part

Embedding PDF files directly in your SharePoint Framework (SPFx) web part is a valuable capability that enhances the user experience, eliminating the need to force downloads or open new tabs. In this article, we will show you how to render a PDF in your SPFx web part with support for.

  1. scrollable pages
  2. customizable dimensional sizing
  3. clean page rendering using the react-pdf library

Prerequisites

Before diving in, make sure you have.

  • An SPFx React-based web part.
  • React-pdf installed.

To install react-pdf and its dependencies.

npm install react-pdf
npm install pdfjs-dist

Then, configure your component to use it.

You can load a PDF and view the entire document using the <Document> and <Page> components from react-pdf. Here is the primary code snippet.

import { Document, Page, pdfjs } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

const [numPages, setNumPages] = useState(0);

return (
  <div style={{ overflowY: "auto", maxHeight: "600px" }}>
    <Document
      file={pdfUrl}
      onLoadSuccess={({ numPages }) => setNumPages(numPages)}
    >
      {Array.from({ length: numPages }, (_, index) => (
        <Page key={index} pageNumber={index + 1} width={700} />
      ))}
    </Document>
  </div>
);

Feature Overview Let's quickly summarize some of the great functionality that comes built-in with react-pdf.

  • Scroll Support: The Document is contained within a wrapping element that has overflowY: auto and a maxHeight. This allows users to scroll through the entire document, even if it contains many pages.  
  • Page Rendering: Each Page is rendered with the Page component. We use: 
    {
  Array.from({ length: numPages }, (_, index) => (
    // your JSX or logic here
  ))
}
  • This generates an array of pages dynamically after the PDF has been loaded.
  • Responsive Width (Optional): You have two options for dynamically changing the width: either use useRef and ResizeObserver to make the PDF completely responsive to the size of its containing element, or use the following approach.
  • Annotation and Text Layers: If you import. 
    import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css";
  • This will also ensure that the functionality of text selection and annotations in a PDF will be functional as if it were a native viewer.

Conclusion

It is simple and useful to render PDFs inside your SPFx web part by using react-pdf. A few lines of code enable your users to view, scroll, and interact with PDFs directly within SharePoint, eliminating the need to download or open external viewers.

Membership not found