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