Skip to content
Logo dark Logo
Load via Blob

This method allows you to load a PDF file dynamically from a Blob, which is useful when:

  • PDF as a response from an API
  • File uploaded by the user (e.g., via <input type="file" />)

Refer to Handling Source of PDF File (Blob) for more information.

Response from an API

Section titled “Response from an API”
import { useEffect, useState } from "react";
import {
  RPConfig,
  RPProvider,
  RPDefaultLayout,
  RPPages,
} from "@pdf-viewer/react";


export const UploadBlobViewer = () => {
  const [pdfBlobUrl, setPdfBlobUrl] = useState("");
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);


  useEffect(() => {
    const fetchPdf = async () => {
      try {
        // Fetch PDF from the API
        // Assume the API endpoint is set up to serve the PDF
        const response = await fetch("/pdf/ECMAScript_annotated.pdf");


        if (!response.ok) {
          throw new Error("Failed to fetch PDF");
        }


        // Convert the response to a Blob
        const blob = await response.blob();


        // Generate a Blob URL
        const blobUrl = URL.createObjectURL(blob);


        // Update state with the Blob URL
        setPdfBlobUrl(blobUrl);
      } catch (err) {
        // Handle errors
        const errorMessage =
          err instanceof Error ? err.message : "Unknown error";
        setError(errorMessage);
      } finally {


        // Set loading to false
        setIsLoading(false);
      }
    };


    // Call the fetch function
    fetchPdf();


    // Cleanup function to revoke the Blob URL when the component unmounts
    return () => {
      if (pdfBlobUrl) {
        URL.revokeObjectURL(pdfBlobUrl);
      }
    };
  }, []); // Empty dependency array ensures this runs only once onmount


  return (
    <>
      <p style={{ textAlign: "center" }}>PDF file : {pdfBlobUrl}</p>


      <RPConfig>
        <RPProvider src={pdfBlobUrl}>
          <RPDefaultLayout>
            <RPPages />
          </RPDefaultLayout>
        </RPProvider>
      </RPConfig>
    </>
  );
};

An Image of Response from an API result

File uploaded by the user

Section titled “File uploaded by the user”
import { useState } from "react";
import {
  RPConfig,
  RPProvider,
  RPDefaultLayout,
  RPPages,
} from "@pdf-viewer/react";


export const UploadBlobViewer= () => {
  const [pdfBlobUrl, setPdfBlobUrl] = useState("");


  const handleFileChange = (e) => {
       // Get the first selected file from the input event
        const selectedFile = e.target.files?.[0];


      // Create a temporary object URL (blob URL) for the selected file
        const blobUrl = selectedFile ? URL.createObjectURL(selectedFile) : "";


      // If a file is selected, update the state with the blob URL
        if (selectedFile) {
          setPdfBlobUrl(blobUrl);
        }
     };


  return (
    <>
      <input accept="application/pdf" type="file" onChange={handleFileChange}/>


      <RPConfig>
        <RPProvider src={pdfBlobUrl}>
          <RPDefaultLayout>
            <RPPages />
          </RPDefaultLayout>
        </RPProvider>
      </RPConfig>
    </>
  );
};

An image of file uploaded by the user result