The flow is after uploading Pdf I need to render/view the uploaded pdf in next screen. So, to render the pdf I am using "React-Pdf" library. So, I have converted the uploaded pdf to base64 format and gave as a parameter/value to : ->
<Document
file={base64Code}
onLoadSuccess={(data) => setTotalPages(data.numPages)}
onSourceError={(err) => console.log(err)}
onLoadError={() => console.log("ERR")}
loading="Please wait while we load the document..."
>
<div
style={{
display: "flex",
justifyContent: "center",
overflow: "hidden",
overflowY: "scroll",
height: 550,
}}
>
<Page
pageNumber={pageNum}
width={900}
scale={0.8}
className="page"
onLoadSuccess={(data) => {
setPageDetails(data);
}}
/>
{/* Pagination */}
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
// border: "1px solid red",
marginLeft: "100px",
}}
>
<div
style={{
position: "fixed",
}}
>
<Button
onClick={() => setPageNum(pageNum - 1)}
disabled={pageNum === 1}
>
-
</Button>
<div>
Page: {pageNum}/{totalPages}
</div>
<Button
onClick={() => setPageNum(pageNum + 1)}
disabled={pageNum > totalPages - 1}
>
+
</Button>
</div>
</div>
</div>
</Document>
`
I have written only Important code here.
The final output is ->
.
In the bottom the text is being displaying that should not happen.
And uploaded pdf type is ->
.
How can i remove the extra text at the bottom?
used a <div> and mentioned overflow css but it didn't resolve. Can any one help in resolving this problem. Thank you.