When does your app need its own PDF preview?

Start with an open or download link if that lets customers get the invoice they need. Use PDF.js when you want the preview inside your app with controls such as page navigation.

PDF.js has a display library and a viewer built on it. A developer can build on the viewer or use the library to render pages. The viewer can support some annotations, but its job here is to open an existing invoice.

How should an invoice viewer get a private file?

Have your app check that the signed-in person is allowed to retrieve the invoice before serving the file. A viewer displays what it can fetch. The viewing page does not decide who owns the invoice.

The browser may block a PDF hosted at a different site unless that source allows your app to read it. Keep the browser library and its background worker on the same version. The worker is a separate file that helps process the PDF.

What should people get if the preview fails?

Offer an authorized link to open or download the original invoice. A preview is useful, but someone may need the file for their records or another reader.

PDF.js is open source under Apache 2.0. Budget for integration and upkeep. Check your target browsers and offer readable invoice details in the app if the preview does not provide a usable way to read them.

How would you check a two-page preview?

Sketch a two-page invoice with fictional details. Do not open a real customer file or deploy a viewer.

Follow the two pages
Give each page a different heading and mark where the reader goes next. Keep a place to open or download the original.
Plan the unavailable state
Draw the preview failing for an authorized fictional reader. Make sure they still have a way to request the original. A reader without access should get neither the preview nor the file.