try to use pdf viewer
This commit is contained in:
30
components/pdfViewer.jsx
Normal file
30
components/pdfViewer.jsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { pdfjs, Document, Page } from 'react-pdf';
|
||||||
|
|
||||||
|
// Set workerSrc to load PDF.js worker (important for performance)
|
||||||
|
//pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
|
||||||
|
|
||||||
|
const PDFJsViewer = ({ fileUrl }) => {
|
||||||
|
const [numPages, setNumPages] = useState(null);
|
||||||
|
|
||||||
|
function onDocumentLoadSuccess({ numPages }) {
|
||||||
|
setNumPages(numPages);
|
||||||
|
console.log("PDF pages: " + numPages);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Document
|
||||||
|
file={fileUrl}
|
||||||
|
onLoadSuccess={onDocumentLoadSuccess}
|
||||||
|
options={{ workerSrc: "https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js" }}
|
||||||
|
>
|
||||||
|
{Array.from(new Array(numPages), (el, index) => (
|
||||||
|
<Page key={`page_${index + 1}`} pageNumber={index + 1} />
|
||||||
|
))}
|
||||||
|
</Document>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PDFJsViewer;
|
Reference in New Issue
Block a user