0

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 -> . enter image description here In the bottom the text is being displaying that should not happen. And uploaded pdf type is -> enter image description here . 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.

0 Answers0