Server side range request sample code in javascript/angular

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.7.2

Detailed description of issue
We have been using pdf js plus viewer, loading large pdf (500+ pages) viewer taking long time to load. is there any sample javascript code to implement server side/range request?

Hello prajneshu.khandavall,

Supporting range requests is a server setting on your file server. Take a look at this guide here for more information: Best-practices | Apryse Documentation

Best regards,
Tyler

Hi Tyler,

We are encountering an issue with range requests when trying to open large files using PDF.js Express in the browser. For some files, the range requests are working perfectly fine, but for others (both 40MB and 180MB files), the fourth range request fails, leading to an error.

Here is a detailed breakdown of the issue:

File Details:

  • File 1: 40MB PDF file (Successful with custom code, but fails in PDF.js Express)
  • File 2: 180MB PDF file (Fails in PDF.js Express)

Observed Behavior:

  • For both the 40MB and 180MB files, PDF.js Express sends four range requests:
    1. The first request is for the entire file, and it successfully retrieves the content.
    2. The second, third, and fourth requests are for specific byte ranges, but the fourth range request fails with a 400 error (ConditionalHeadersNotSupported or similar).The network tab in the browser shows these four requests, where the first three successfully return content, but the fourth request fails.

Custom Code Behavior:

  • We tested with custom code using node js (outside of PDF.js Express) to download the same 40MB and 180MB files. The custom code successfully handled the range requests without any issues and was able to download the files in parallel chunks.

Issue with PDF.js Express:

  • When using PDF.js Express to display the PDF files (both 40MB and 180MB), the range requests fail after the fourth request with a 400 error, and the file is not opened in the viewer.
  • The range requests being made by PDF.js Express are not identical to the ones handled by my custom code.
  • For some files, the first three range requests succeed, but the fourth request results in an error like:
400 Error: ConditionalHeadersNotSupported

Additional Information:

  • The issue occurs only for large files, and I believe this might be related to how PDF.js Express handles the range requests automatically in the background.
  • When tested with smaller files, the range requests succeed without issue.

Questions:

  • Is there a configuration or setting within PDF.js Express that can help resolve this issue for larger files?
  • Could this be related to how PDF.js Express handles conditional requests or range request headers for large files?

Any insights or suggestions would be greatly appreciated!

Hi there,

Are you able to reproduce the issue on the demo?

Could you please share the input files and the HAR file?
Have you also linearized the PDF files?

Best regards,
Kevin

Hi Kevin,

Yes we are able to replicate the same in DEMO as well
please find the attached screenshots for the same

URL of the file for your reference : File Link

Hi there,

Thank you for the file url, I was able to reproduce the issue.

It looks like this is a common issue coming from Azure, please see this forum post for possible solutions:

Best regards,
Kevin Kim