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