Question 269899 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Displaying PDFDocument in canvas

Currently im working on displaying PDF file on website with React ts. Im using pdf-lib to work with PDF file. What im looking for is how to display the pdf file on canvas so I can draw boxes or objects overlaying the pdf page. I’ve tried react-pdf to display the file on but it seems to be uneditable. Do u guys have any suggestion?

Tags:

2

Answers


  1. 0

    I don’t know if this helps but that could be a lead to help you dig deeper.

    So i suggest you to use the konvajs lib, you will need to convert your pdf to image or HTML to be able to use the drawing of konva

    Login or Signup to reply.
  2. 0

    PDF-lib has the ability to add PDF annotations such as Text Boxes (i.e. Acrofields) and thus add textual annotations. It also has the ability to draw directly in a PDF objects, like circles when they are pre defined.

    However, it is not a GUI PDF editor and is very clear on interaction:-

    pdf-lib does not support the use of HTML or CSS when adding content to a PDF. Similarly, pdf-lib cannot embed HTML/CSS content into PDFs. As convenient as such a feature might be, it would be extremely difficult to implement and is far beyond the scope of this library. If this capability is something you need, consider using Puppeteer.

    Although it is old and not a maintained lib you can see some nice simpler examples around the web such as https://github.com/ravisr/reactjs-image-annotation However that would not translate into a PDF underlay.

    What you need is probably a commercial library as supported by a large team of programmers, such as Apryse https://pdfjs.express/documentation/react

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search