wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.

Home Page:https://projects.wojtekmaj.pl/react-pdf

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

We are facing the issue were in PDF file the first page is getting duplicated.

tmkrishnareddy opened this issue · comments

Before you start - checklist

  • I followed instructions in documentation written for my React-PDF version
  • I have checked if this bug is not already reported
  • I have checked if an issue is not listed in Known issues
  • If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

We are getting duplicate 1st page while rendering the PDF using base64 alpha numeric code.

  useEffect(() => {
    setLoading(true);
    apis
      .getPdf(location.state.pdfId)

      .then(data => {
        // // Create a Blob from the PDF Stream
        const getdata = data.content.$binary.base64;
        const contentType = 'application/pdf';
        const getdatatotal = {
          doc: `data:${contentType};base64,${getdata}`,
        };
        setPdf(getdatatotal.doc);
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  }, [location]);

HTML Code

 <div className={pdfcss['pdf-container']} onCopy={e => stopCopy(e)}>
          <button type='button' onClick={() => navigate(returnPath, { state: returnStateVal })}>
            <img alt='BackBtn' src={Back} />
            Back
          </button>
          <h3 className={pdfcss['pdf-title']}>Knowledge Article - {location.state.pdfId}</h3>
          <div className={pdfcss.controls}>
            Zoom
            <button type='button' onClick={increaseZoom} /* disabled={pageNumber === 1} */>
              +
            </button>
            {zoomLevel}
            <button type='button' onClick={desceaseZoom} /* disabled={pageNumber === numPages} */>
              -
            </button>
          </div>
          <div className={pdfcss['center-pdf']}>
            <Document
              file={`data:application/pdf;base64${addpdf}`}
              onLoadSuccess={onDocumentLoadSuccess}
              loading={<PageLoader className='loader' />}>
              <WatermarkWrapper>
                <StyledWatermark
                  text={' '}
                  style={{
                    width: 610,
                    height: 790,
                  }}
                  multiple
                  className='space-props-test'>

Steps to reproduce

NA

Expected behavior

PDF should render without duplication of first page

Actual behavior

PDF is rendering with duplication of first page.

Additional information

No response

Environment

  • Browser (if applicable): 123.0.6312.86
  • React-PDF version: 5.5.0
  • React version: 17.0.2
  • Webpack version (if applicable):

I don't see anything wrong with the code you've provided, but it's cut off at a crucial part where you actually render the pages, which makes me unable to help.