Here is an example to show PDF in webpage with React-pdf-viewer, including helpful default layout and loading progress bar.

import { Viewer, ProgressBar, Worker } 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';

const PdfViewer = () => {
    const defaultLayoutPluginInstance = defaultLayoutPlugin();
    
    return (
        <div style={{
            height: '1000px'
            }}>
            <Worker workerUrl='/pdfjs-dist/build/pdf.worker.js'>
            <Viewer 
                fileUrl="/assets/example2.pdf" 
                renderLoader={(percentages) => (
                    <div style={{ width: '240px' }}>
                        <ProgressBar progress={Math.round(percentages)} />
                    </div>
                )}
                plugins={[defaultLayoutPluginInstance]}
            />
            </Worker>
        </div>
    )
}

export default PdfViewer; 

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *