Render PDFs in React Web Applications. Check [URL] for more details.

add-a-watermark-using-react-pdf-viewer-library.js

// Import necessary dependencies from React and react-pdf-viewer library
import React from 'react';
import { Viewer, SpecialZoomLevel, Worker } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

// Functional component for rendering a PDF with a watermark
const WaterMarkExample = ({ fileUrl }) => {
  
    // Custom rendering function for each page
    const renderPage = (props) => (
        <>
            {/* Rendering the canvas layer for drawing */}
            {props.canvasLayer.children}

            {/* Adding a watermark div on top of the page */}
            <div
                style={{
                    alignItems: 'center',
                    display: 'flex',
                    height: '100%',
                    justifyContent: 'center',
                    left: 0,
                    position: 'absolute',
                    top: 0,
                    width: '100%',
                }}
            >
                <div
                    style={{
                        // Styling for the watermark
                        color: 'rgba(0, 0, 0, 0.2)',
                        fontSize: `${8 * props.scale}rem`,
                        fontWeight: 'bold',
                        textTransform: 'uppercase',
                        transform: 'rotate(-45deg)',
                        userSelect: 'none',
                    }}
                >
                    Draft
                </div>
            </div>
            {/* Rendering annotation layer */}
            {props.annotationLayer.children}
            
            {/* Rendering text layer */}
            {props.textLayer.children}
        </>
    );

    return (
    
        {/* Wrapping the PDF rendering component with a Worker for PDF.js processing */}
        <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
        
            {/* Rendering the PDF viewer with the provided file URL and custom rendering function */}
            <Viewer fileUrl={fileUrl} renderPage={renderPage} defaultScale={SpecialZoomLevel.PageFit} />
            
        </Worker>
    );
};

// Export the WaterMarkExample component as the default export
export default WaterMarkExample;

confirmation-modal-component-open-a-confirmation-modal-when-users-click-a-link-using-react-pdf-viewer-library.js

// Importing React library and necessary components from react-pdf-viewer/core
import * as React from 'react';
import { PrimaryButton, MinimalButton, Modal } from '@react-pdf-viewer/core';

// Functional component for rendering a confirmation modal
const ConfirmationModal = ({ store }) => {
  
    // State to manage the target link
    const [target, setTarget] = React.useState('');

    // Event handler for clicking on a target link
    const handleTargetClicked = (clickedTarget) => {
      
        setTarget(clickedTarget);
      
    };

    // Event handler for canceling the confirmation
    const handleCancel = () => {
        setTarget('');
      
    };

    // Event handler for confirming and opening the link in a new tab
    const handleConfirm = () => {
      
        setTarget('');
        window.open(target, '_blank');
      
    };

    // Function to render the content of the confirmation modal
    const renderContent = () => (
      
        <div style={{ padding: '0.5rem' }}>
            <div
                style={{
                    borderBottom: '1px solid rgba(0, 0, 0, .1)',
                    paddingBottom: '0.5rem',
                    marginBottom: '0.5rem',
                }}
            >
                <div>Are you sure that you want to follow this link</div>
                <span style={{ fontWeight: 'bold', textDecoration: 'underline' }}>{target}</span>?
            </div>
            <div
                style={{
                    alignItems: 'center',
                    display: 'flex',
                    justifyContent: 'end',
                }}
            >
                <div style={{ marginRight: '0.25rem' }}>
                    <MinimalButton onClick={handleCancel}>No</MinimalButton>
                </div>
                <PrimaryButton onClick={handleConfirm}>Yes</PrimaryButton>
            </div>
        </div>
    );

    // Effect hook to subscribe and unsubscribe to the clickedTarget event
    React.useEffect(() => {
        store.subscribe('clickedTarget', handleTargetClicked);

        return () => {
          
            store.unsubscribe('clickedTarget', handleTargetClicked);
          
        };
    }, []);

    // Render the confirmation modal if a target is set
    return (
      
        target && <Modal isOpened={true} closeOnClickOutside={false} closeOnEscape={false} content={renderContent} />
    );
};

// Export the ConfirmationModal component as the default export
export default ConfirmationModal;

openconfirmationmodel-component-open-a-confirmation-modal-when-users-click-a-link-using-react-pdf-viewer-library.js

// Importing React library and necessary components from react-pdf-viewer/core
import * as React from 'react';
import { Viewer, SpecialZoomLevel } from '@react-pdf-viewer/core';
import { Worker } from '@react-pdf-viewer/core';

// Importing the openLinksPlugin from the local file
import openLinksPlugin from './openLinksPlugin';

// Functional component for rendering PDF with confirmation modal for external links
const OpenConfirmationModal = ({ fileUrl }) => {
  
    // Creating an instance of the openLinksPlugin
    const openLinksPluginInstance = openLinksPlugin();

    return (
        // Using Worker component to load PDF.js worker script
        <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
      
            {/* Using Viewer component to render PDF with plugins */}
            <Viewer fileUrl={fileUrl} plugins={[openLinksPluginInstance]} defaultScale={SpecialZoomLevel.PageFit} />
              
        </Worker>
    );
};

// Exporting the component as the default export
export default OpenConfirmationModal;

openlinksplugin-component-open-a-confirmation-modal-when-users-click-a-link-using-react-pdf-viewer-library.js

// Importing React library and createStore function from react-pdf-viewer/core
import * as React from 'react';
import { createStore } from '@react-pdf-viewer/core';

// Importing the ConfirmationModal component from the local file
import ConfirmationModal from './ConfirmationModal';

// Custom hook for creating the store
const useStore = () => React.useMemo(() => createStore({}), []);

// Plugin for opening links with confirmation modal
const OpenLinksPlugin = () => {
  
    // Creating a store using the custom hook
    const store = useStore();

    // Event handler for handling link clicks
    const handleClick = (e) => {
      
        e.preventDefault();
        const href = e.target.href;
      
        // Updating the store with the clicked link
        store.update('clickedTarget', href);
      
    };

    // Function to find links with data-target="external" attribute and attach click event
    const findLinks = (e) => {
      
        e.container.querySelectorAll('a[data-target="external"]').forEach((link) => {
            link.addEventListener('click', handleClick);
          
        });
    };

    // Function to render the viewer with the ConfirmationModal component
    const renderViewer = (renderViewerProps) => {
      
        const currentSlot = renderViewerProps.slot;
        if (currentSlot.subSlot) {
            currentSlot.subSlot.children = (
                <>
                    <ConfirmationModal store={store} />
                    {currentSlot.subSlot.children}
                </>
            );
        }

        return currentSlot;
    };

    // Returning the plugin functions
    return {
      
        onAnnotationLayerRender: findLinks,
        renderViewer,
      
    };
};

// Export the OpenLinksPlugin component as the default export
export default OpenLinksPlugin;

preview-pdf-document-inside-a-modal-using-react-pdf-viewer-library.js

// Import necessary dependencies from React and react-pdf-viewer library
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Viewer } from '@react-pdf-viewer/core';
import { Worker } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

// Functional component for rendering a PDF in a modal
const ModalExample = ({ fileUrl }) => {
  
    // State to manage the visibility of the modal
    const [shown, setShown] = useState(false);

    // Function to create the content of the modal
    const modalBody = () => (
      
        <div
            style={{
                backgroundColor: '#fff',
                flexDirection: 'column',
                overflow: 'hidden',

                /* Fixed position */
                left: 0,
                position: 'fixed',
                top: 0,

                /* Take full size */
                height: '100%',
                width: '100%',

                /* Displayed on top of other elements */
                zIndex: 9999,
                display: 'flex'
            }}
        >
            <div
                style={{
                    alignItems: 'center',
                    backgroundColor: '#000',
                    color: '#fff',
                    display: 'flex',
                    padding: '.5rem',
                }}
            >
              
                {/* Displaying the file URL in the modal header */}
                <div style={{ marginRight: 'auto' }}>{fileUrl}</div>

                {/* Close button to hide the modal */}
                <button
                    style={{
                        backgroundColor: '#357edd',
                        border: 'none',
                        borderRadius: '4px',
                        color: '#ffffff',
                        cursor: 'pointer',
                        padding: '8px',
                    }}
                    onClick={() => setShown(false)}
                >
                    Close
                </button>
            </div>

            {/* PDF Viewer component wrapped in a Worker for PDF.js */}
            <div
                style={{
                    flexGrow: 1,
                    overflow: 'auto',
                    maxHeight: '90vh',
                    width: '80%',
                    alignSelf: 'center'
                }}
            >
                {/* Wrapping the PDF rendering component with a Worker for PDF.js processing */}
                <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js"> 
                  
                    {/* Rendering the PDF viewer with the provided file URL */}
                    <Viewer fileUrl={fileUrl} />
                </Worker>
            </div>
        </div>
    );

    return (
        <>
            {/* Button to open the modal */}
            <button
                style={{
                    backgroundColor: '#00449e',
                    border: 'none',
                    borderRadius: '.25rem',
                    color: '#fff',
                    cursor: 'pointer',
                    padding: '.5rem',
                }}
                onClick={() => setShown(true)}
            >
                Open modal
            </button>

            {/* Rendering the modal using ReactDOM.createPortal */}
            {shown && ReactDOM.createPortal(modalBody(), document.body)}
        </>
    );
};

// Export the ModalExample component as the default export
export default ModalExample;

render-pdf-document-using-an-array-of-bytes-using-react-pdf-viewer-library.js

// Import necessary dependencies from react and react-pdf-viewer library
import * as React from 'react';
import { Viewer, SpecialZoomLevel } from '@react-pdf-viewer/core';
import { Worker } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

// Functional component for loading a PDF from byte data
const LoadFromBytes = () => {
    return (

        // Use a Worker to load the PDF.js worker script
        <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js"> 

        {/* PDF Viewer component to render the PDF document from byte data. */}
        <Viewer
            fileUrl={
                new Uint8Array([
                    37, 80, 68, 70, 45, 49, 46, 55, 10, 10, 49, 32, 48, 32, 111, 98, 106, 32, 32, 37, 32, 101, 110, 116,
                    114, 121, 32, 112, 111, 105, 110, 116, 10, 60, 60, 10, 32, 32, 47, 84, 121, 112, 101, 32, 47, 67,
                    97, 116, 97, 108, 111, 103, 10, 32, 32, 47, 80, 97, 103, 101, 115, 32, 50, 32, 48, 32, 82, 10, 62,
                    62, 10, 101, 110, 100, 111, 98, 106, 10, 10, 50, 32, 48, 32, 111, 98, 106, 10, 60, 60, 10, 32, 32,
                    47, 84, 121, 112, 101, 32, 47, 80, 97, 103, 101, 115, 10, 32, 32, 47, 77, 101, 100, 105, 97, 66,
                    111, 120, 32, 91, 32, 48, 32, 48, 32, 50, 48, 48, 32, 50, 48, 48, 32, 93, 10, 32, 32, 47, 67, 111,
                    117, 110, 116, 32, 49, 10, 32, 32, 47, 75, 105, 100, 115, 32, 91, 32, 51, 32, 48, 32, 82, 32, 93,
                    10, 62, 62, 10, 101, 110, 100, 111, 98, 106, 10, 10, 51, 32, 48, 32, 111, 98, 106, 10, 60, 60, 10,
                    32, 32, 47, 84, 121, 112, 101, 32, 47, 80, 97, 103, 101, 10, 32, 32, 47, 80, 97, 114, 101, 110, 116,
                    32, 50, 32, 48, 32, 82, 10, 32, 32, 47, 82, 101, 115, 111, 117, 114, 99, 101, 115, 32, 60, 60, 10,
                    32, 32, 32, 32, 47, 70, 111, 110, 116, 32, 60, 60, 10, 32, 32, 32, 32, 32, 32, 47, 70, 49, 32, 52,
                    32, 48, 32, 82, 32, 10, 32, 32, 32, 32, 62, 62, 10, 32, 32, 62, 62, 10, 32, 32, 47, 67, 111, 110,
                    116, 101, 110, 116, 115, 32, 53, 32, 48, 32, 82, 10, 62, 62, 10, 101, 110, 100, 111, 98, 106, 10,
                    10, 52, 32, 48, 32, 111, 98, 106, 10, 60, 60, 10, 32, 32, 47, 84, 121, 112, 101, 32, 47, 70, 111,
                    110, 116, 10, 32, 32, 47, 83, 117, 98, 116, 121, 112, 101, 32, 47, 84, 121, 112, 101, 49, 10, 32,
                    32, 47, 66, 97, 115, 101, 70, 111, 110, 116, 32, 47, 84, 105, 109, 101, 115, 45, 82, 111, 109, 97,
                    110, 10, 62, 62, 10, 101, 110, 100, 111, 98, 106, 10, 10, 53, 32, 48, 32, 111, 98, 106, 32, 32, 37,
                    32, 112, 97, 103, 101, 32, 99, 111, 110, 116, 101, 110, 116, 10, 60, 60, 10, 32, 32, 47, 76, 101,
                    110, 103, 116, 104, 32, 52, 52, 10, 62, 62, 10, 115, 116, 114, 101, 97, 109, 10, 66, 84, 10, 55, 48,
                    32, 53, 48, 32, 84, 68, 10, 47, 70, 49, 32, 49, 50, 32, 84, 102, 10, 40, 72, 101, 108, 108, 111, 44,
                    32, 119, 111, 114, 108, 100, 33, 41, 32, 84, 106, 10, 69, 84, 10, 101, 110, 100, 115, 116, 114, 101,
                    97, 109, 10, 101, 110, 100, 111, 98, 106, 10, 10, 120, 114, 101, 102, 10, 48, 32, 54, 10, 48, 48,
                    48, 48, 48, 48, 48, 48, 48, 48, 32, 54, 53, 53, 51, 53, 32, 102, 32, 10, 48, 48, 48, 48, 48, 48, 48,
                    48, 49, 48, 32, 48, 48, 48, 48, 48, 32, 110, 32, 10, 48, 48, 48, 48, 48, 48, 48, 48, 55, 57, 32, 48,
                    48, 48, 48, 48, 32, 110, 32, 10, 48, 48, 48, 48, 48, 48, 48, 49, 55, 51, 32, 48, 48, 48, 48, 48, 32,
                    110, 32, 10, 48, 48, 48, 48, 48, 48, 48, 51, 48, 49, 32, 48, 48, 48, 48, 48, 32, 110, 32, 10, 48,
                    48, 48, 48, 48, 48, 48, 51, 56, 48, 32, 48, 48, 48, 48, 48, 32, 110, 32, 10, 116, 114, 97, 105, 108,
                    101, 114, 10, 60, 60, 10, 32, 32, 47, 83, 105, 122, 101, 32, 54, 10, 32, 32, 47, 82, 111, 111, 116,
                    32, 49, 32, 48, 32, 82, 10, 62, 62, 10, 115, 116, 97, 114, 116, 120, 114, 101, 102, 10, 52, 57, 50,
                    10, 37, 37, 69, 79, 70,
                ])
            }
            defaultScale={SpecialZoomLevel.PageFit}
        />
        </Worker>
    );
};

// Export the LoafFromBytes component as the default export
export default LoadFromBytes;

render-toolbar-along-with-the-pdf-document-using-react-pdf-viewer-library.js

// Import necessary dependencies from react and react-pdf-viewer library
import React from 'react';
import { Viewer, Worker } from '@react-pdf-viewer/core';
import { SpecialZoomLevel } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

// Functional component for rendering a PDF with default layout
const RenderPDF = ({ fileUrl }) => {
  
    // Create an instance of the default layout plugin
    const defaultLayoutPluginInstance = defaultLayoutPlugin();

    return (
        // Container with a specified height
        <div
            style={{
                height: '100%',
            }}
        >
            {/* Using a Worker to load the PDF.js worker script */}
            <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
              
                {/* PDF Viewer component with file URL, default scale, and default layout plugin */}
                <Viewer fileUrl={fileUrl} defaultScale={SpecialZoomLevel.PageFit} plugins={[defaultLayoutPluginInstance]} />
                  
            </Worker>
        </div>
    );
};

// Export the RenderPDF component as the default export
export default RenderPDF;

set-the-page-from-the-last-visit-as-the-initial-page-using-react-pdf-viewer-library.js

// Import necessary dependencies from react and react-pdf-viewer library
import React from 'react';
import { Viewer, Worker } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

// Functional component for rendering a PDF document with a Viewer
const RenderPDF = ({ fileUrl }) => {
    // Function to handle page changes and store the current page in localStorage
    const handlePageChange = (e) => {
        localStorage.setItem('current-page', `${e.currentPage}`);
    };

    // Retrieving the initial page from localStorage or defaulting to page 0
    const initialPage = localStorage.getItem('current-page') ? parseInt(localStorage.getItem('current-page'), 10) : 0;

    return (
        // Using a Worker to load the PDF.js worker script
        <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">  
            {/* PDF Viewer component with file URL, initial page, and onPageChange callback */}
            <Viewer fileUrl={fileUrl} initialPage={initialPage} onPageChange={handlePageChange} /> 
        </Worker>
    );
};

// Export the RenderPDF component as the default export
export default RenderPDF;

upload-and-preview-a-pdf-document-using-react-pdf-viewer-library.js

// Import necessary dependencies from react and react-pdf-viewer library
import * as React from 'react'
import { Viewer, Worker } from '@react-pdf-viewer/core';
import { SpecialZoomLevel } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

// Functional component for previewing a local PDF file
const PreviewLocalFile = () => {
  
    // State to manage the URL of the selected PDF file
    const [url, setUrl] = React.useState('');

    // Event handler for the file input change
    const onChange = (e) => {
      
        // Get the selected files
        const files = e.target.files;
      
        // Check if a file is selected, and set the URL for preview
        files.length > 0 && setUrl(URL.createObjectURL(files[0]));
    };

    return (
        <div>
      
            {/* Input for selecting a PDF file */}
            <input type="file" accept=".pdf" onChange={onChange} />

            {/* Container for displaying the PDF preview */}
            <div className="mt4" style={{ height: '700px' }}>
              
                {/* Check if a PDF file URL is available */}
                {url ? (
                  
                    // Display the PDF Viewer component wrapped in a Worker for PDF.js
                    <div
                        style={{
                            border: '1px solid rgba(0, 0, 0, 0.3)',
                            height: '80%',
                        }}
                    >
                        {/* Use a Worker to load the PDF.js worker script */}
                        <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js"> 
                          
                            {/* PDF Viewer component with the selected file URL and default scale */}
                            <Viewer fileUrl={url} defaultScale={SpecialZoomLevel.PageFit}/>
                        </Worker>
                    </div>
                ) : (
                  
                    // Display a placeholder if no PDF file is selected
                    <div
                        style={{
                            alignItems: 'center',
                            border: '1px solid rgba(0, 0, 0, .3)',
                            display: 'flex',
                            fontSize: '2rem',
                            height: '100%',
                            justifyContent: 'center',
                            width: '100%',
                        }}
                    >
                        Preview area
                    </div>
                )}
            </div>
        </div>
    );
};

// Export the component as the default export
export default PreviewLocalFile;