What to look for in a PDF SDK - PDF.js vs. react-pdf - DeveloperWeek 2021

I put together a presentation + repo for DeveloperWeek 2021 to help developers evaluate several different popular libraries out there and highlight some of the gotchas one might encounter.
Link to the repo: github.com/andreysaf/Develope...
What to look for in a PDF library when you are strapped for time?
Why do PDFs look different in different browsers?
Why do only some libraries offer annotation capabilities?
For each of the libraries evaluated, I created a create-react-app and embedded the viewer inside of it.
- React PDF www.npmjs.com/package/react-pdf
- PDF.js mozilla.github.io/pdf.js/
- PDF.js Express pdfjs.express/documentation
- PDFTron's WebViewer www.pdftron.com/documentation...
Introduction: (0:00)
Adding PDFs to your app: (1:15)
React-PDF: (6:35)
PDF.js: (11:00)
PDF.js Express: (14:33)
PDFTron's WebViewer: (18:20)

[@yurykiryaev329]

thank you man! it's really important information

[@indomitabledane3068]

You are doing Gods work.

[@apryse-solutions]

Comment here with any other libs you want me to evaluate! Let's expand this repo.

[@giansingh4710]

this video has saved my life. Thanks. Very Very clutch

[@apryse-solutions]

Glad to hear it!

[@genesisabel]

Thanks for this information

[@chandbee1719]

Can we do drag drop files in Pdftron webviwer?
Because it's loading files from a specific location. But I want to know that can we drag drop files instead of placing within the solution.

[@jtrenda333]

I had a client request that a pdf that we're generating on the front end using react-pdf, be emailed to them every day, so i set up node-cron on my backend node server, but i'm not sure how to use react-pdf within that context to generate a stream that i can then send to nodemailer's attachment options. is there a way to do that?

[@sneharajput3727]

after pdf reload how highlighted text should be show, can you guide me?

[@JohnathanHendrix]

Do you have any videos showcasing how you can prepopulate pdfs and sign them using an existing base64 signature? I am using react and the data I would want to use for prepopulating is avaliable in the component via context.

[@apryse-solutions]

Here you go for signatures: www.pdftron.com/documentation/web/guides/signature-tool/#importing-existing-signatures and here is one for forms: www.pdftron.com/documentation/web/guides/forms/fill-fields/.

[@nykollemalone1280]

Can I use react-pdf to render a url from my api request or other external url? Example:

[@apryse-solutions]

As long as you configure CORS on the server that serves those files you should be good.

[@KeyhanHadjari]

How are these libraries regarding PDF/A support and XFA support? Is it possible to save the user input in an XFA file when a user has filled a form?

[@apryse-solutions]

XFA is limited support since Adobe deprecated it, now it’s acroforms. You can save of field values in XFDF. PDF/A is supported through PDFTron for creation and validation. All conformance levels. Reach out if you need further info.

[@maximilianomaro6230]

Hello, I just need to get page count and dimensions (width and height in mm), the PDF files are uploaded by users for print... Getting this data I'll can calculate the size of the spin in a book for example; or the number of pages that fits in a sheet...

[@apryse-solutions]

Hello Max, that should be possible with our SDK. The page dimensions in PDF are measured in box sizes, there is a media box, crop box etc. For example API for crop box: www.pdftron.com/api/pdfnet-node/PDFNet.Page.html#getCropBox__anchor.

[@davidkramer6286]

Do you have a way to send pdf to backend or save pdf to state (React-PDF libary)

[@apryse-solutions]

You would just do a POST request with a blob to the backend. I would be careful how you set blob to state as it might be memory heavy.

[@davidkramer6286]

@@apryse-solutions Thnak you

[@christoferi9636]

its only for view?
I want to be downloadable

[@ankithap7624]

Can you tell me how to didplay pdf of type octet/application??

[@apryse-solutions]

You should probably convert it to a blob either in memory of browser, or ahead of time on server and then pass that to the WebViewer `instance.loadDocument(blob, {extension: 'pdf'})`

[@valerymbele4451]

sorry , it is not working for react. its loading all my app inside the viewer div

[@apryse-solutions]

Hey Valery, what error are you getting?

[@juancarlosmateo9409]

@@apryse-solutions I've got the same problem. All my app its rendering into viewer div. How can I fix it??

[@apryse-solutions]

@@juancarlosmateo9409 Which sample? pdf.js, react-pdf, pdf.js express or WebViewer?

[@apryse-solutions]

if it is PDF.js Express or WebViewer path is incorrect.

[@apryse-solutions]

For react-pdf, I just did a clean clone, cd react-pdf-sample, cd my-pdf-app and npm i, npm start. The page rendered correctly. Feel free to email me the issue you are seeing [e-mail].

[@starlord1786]

why pdf.js not accept array buffer data, can you explain to me

[@apryse-solutions]

It seems like you can just convert it in memory?

[@mochammadchafid3922]

is pdf.js free for commercial ?

[@apryse-solutions]

I believe pdf.js is free for commercial.

[@PeterWilliams97]

How much does PDFTron cost?

[@apryse-solutions]

Hello Peter, you can fill out the form here: www.pdftron.com/form/contact-sales/

[@apryse-solutions]

Our sales team can work with you to work out flexible licensing