Async Load PDF Through Stream

[skyler.ochsenbein]

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.7.0

Detailed description of issue
I am putting together a small proof of concept to test out the PDF.js Express Viewer library. I’ve been able to load up a PDF from the React/Vite project’s public directory just fine, and I have found topics where people have loaded PDFs from public URLs and pre-signed AWS S3 URLs.

Is it possible to asynchronously load PDFs through a stream? All PDFs are stored on a NAS server. I’d like to make an API request to our server that would then serve back the file stream.

The alternative solution in my mind would be to create public access to the NAS server. Though it’d be through a reverse proxy, it’s still not ideal, for obvious security reasons. It’d also mean having to configure and maintain an external solution outside of the main project’s codebase.

[system]

Hello, I’m Ron, an automated tech support bot

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:

• Manually download and integrate PDF.js Express Viewer - Integrate into your application
• Integrating PDF.js Express Viewer into a Vue.js project - Sample overview
• Integrating PDF.js Express Plus with Vue.js - Sample overview

APIs:

• PDF.js Express Utilities
• Core.Annotations.Forms.FieldManager - setPrintHandler()
• ExpressUtils(optionsopt) - # async merge() → {Promise.}

Forums:

• Any way to prevent WebViewer from doing HEAD request?
• Hyperlinks not being detected in pdf.js viewer
• PDF.js Express access to AWS S3 object with pre-signed URL

Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

[kkim]

Hi skyler.ochsenbein,

Can you share a sample code how you are loading the PDF through a stream?
Here’s our documentation regarding loading PDF through different domain:

What is PDF.js Express? | Documentation

Here is a forum guide that may help you answer some of your questions:

Using the HttpPartRetriever

Hey Guys, Trying to make use of the low level apis in PDF JS Express 7.3.5. We operate a custom DRM server (similar to XOD) and would like to stream and decrypt ranges of PDFs documents. I’ve had a go at using the HttpPartRetriever with the following code: CoreControls.getDefaultBackendType().then(async (backendType: any) => { const retriever = await PartRetrievers.getPartRetriever(PartRetrievers.Types.HttpPartRetriever, "http://ourserver.com/3ba24f65b430.pdf", { decrypt: (…

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

[skyler.ochsenbein]

Hey Kevin,

I haven’t tried a solution yet, as my question is how to go about doing that. I’d like to be able to load the PDFs through a Node.js Express backend and serve the file back up to the React frontend. I’m trying to avoid having to statically host the files with a public URL.

Thanks,

Skyler

[kkim]

Hi skyler.ochsenbein,

I am not sure how you would be able to achieve this, as you would still need to make a fetch request to the location where you PDFs are stored (NAS server).
https://pdfjs.express/api/utils/tutorial-Using%20in%20node.html

Like you mentioned, the alternative would be to create the NAS public.

If the NAS server is a subdomain, then you could potentially make a request but there are some things to be mindful of, like CORS issue within an iframe:

PDF.js Express Viewer Download & Integration | Documentation

Loading PDF.js Express from a CDN or another origin | Documentation)-copy-assets-to-cdn

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

[skyler.ochsenbein]

It looks like there’s a lot simpler way I can do this using express.static. The server will have access to the NAS server, I can just create a static path and hide the URL behind a private route. Then for additional security I can generated uuid’s in the database mapped to each PDF so the frontend just passes that into to my API and it can find the correct file.

Example of using express.static, for anyone else that may have this concern. Add the following to the server index:

app.use('/pdf', express.static(__dirname + '/pathToPDF'));