62 行
1.6 KiB
JavaScript
62 行
1.6 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Document, Page, pdfjs } from "react-pdf";
|
|
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
|
|
|
|
import IconButton from '@mui/material/IconButton';
|
|
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
|
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
|
import Container from '@mui/material/Container';
|
|
|
|
export default function PDFViewer(props) {
|
|
const [numPages, setNumPages] = useState(null);
|
|
const [pageNumber, setPageNumber] = useState(1); //default fisrt page
|
|
|
|
function onDocumentLoadSuccess({ numPages }) {
|
|
setNumPages(numPages);
|
|
setPageNumber(1);
|
|
}
|
|
|
|
function changePage(offset) {
|
|
setPageNumber(prevPageNumber => prevPageNumber + offset);
|
|
}
|
|
|
|
function previousPage() {
|
|
changePage(-1);
|
|
}
|
|
|
|
function nextPage() {
|
|
changePage(1);
|
|
}
|
|
|
|
const { pdf } = props;
|
|
|
|
return (
|
|
<Container>
|
|
<Document
|
|
file={pdf}
|
|
onLoadSuccess={onDocumentLoadSuccess}
|
|
>
|
|
<Page pageNumber={pageNumber} />
|
|
</Document>
|
|
<Container className="d-flex justify-content-center">
|
|
<IconButton
|
|
type="button"
|
|
disabled={pageNumber <= 1}
|
|
onClick={previousPage}
|
|
variant="contained"
|
|
>
|
|
<ArrowBackIosIcon/>
|
|
</IconButton>
|
|
{pageNumber || (numPages ? 1 : "--")} of {numPages || "--"}
|
|
<IconButton
|
|
type="button"
|
|
disabled={pageNumber >= numPages}
|
|
onClick={nextPage}
|
|
>
|
|
<ArrowForwardIosIcon/>
|
|
</IconButton>
|
|
</Container>
|
|
</Container>
|
|
);
|
|
}
|