52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
import { Document, Page } from "react-pdf";
|
|
import "react-pdf/dist/esm/Page/AnnotationLayer.css";
|
|
import 'react-pdf/dist/esm/Page/TextLayer.css';
|
|
|
|
import Pagination from "@shared/nej-react-components/Parts/Pagination";
|
|
|
|
import tw, { styled } from "twin.macro"
|
|
import "styled-components/macro"
|
|
import { useState } from "react";
|
|
|
|
import { pdfjs } from 'react-pdf';
|
|
|
|
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
|
|
'pdfjs-dist/build/pdf.worker.min.mjs',
|
|
import.meta.url,
|
|
).toString();
|
|
|
|
export default function PDF({ data }) {
|
|
const [numPages, setNumPages] = useState(null);
|
|
const [pageNumber, setPageNumber] = useState(1);
|
|
|
|
function onDocumentLoadSuccess({ numPages }) {
|
|
setNumPages(numPages);
|
|
}
|
|
|
|
return (
|
|
<div tw="w-full flex flex-col items-start">
|
|
|
|
<Document file={data} onLoadSuccess={onDocumentLoadSuccess}>
|
|
<Page pageNumber={pageNumber} />
|
|
</Document>
|
|
{/*
|
|
<div tw=" w-[21cm] h-[29.7cm] mt-20 overflow-hidden">
|
|
<BalanceDocument />
|
|
</div>
|
|
<div tw=" w-[80mm] mt-20 overflow-hidden">
|
|
<ReceiptDocument />
|
|
</div>
|
|
<div tw=" w-[21cm] mt-10 overflow-hidden h-[29.7cm]">
|
|
<CorrectureDocument data={data} />
|
|
</div>
|
|
<div tw=" w-[21cm] mt-20 overflow-hidden">
|
|
<TransactionDocument data={data}/>
|
|
</div> */}
|
|
|
|
<p tw="mt-4">
|
|
Page {pageNumber} of {numPages}
|
|
</p>
|
|
<Pagination maxPages={numPages} currentPage={pageNumber} setPage={(p) => setPageNumber(p)} />
|
|
</div>
|
|
);
|
|
} |