I am loading bigger size PDF document using the pdf-url it's taking to much time How can I load document faster or Improve perfomance of React APP?

Which product are you using?

PDfjs Express Plus

PDF.js Express Version
@pdftron/pdfjs-express”: “^8.7.4”,

Detailed description of issue
I am loading larger size pdf document using the pdf URL. After the completion of loading pdf adding the annotation using the annotationManager.addAnnotation(rectangleAnnotation); annotationManager.redrawAnnotation(rectangleAnnotation); methds. But it’s taking to much time to load PDF.
How can I improve the performance of react app or decrees the pdf loading time ?

It’s showing blank page for some time after loading PDF and also showing blank page for some seconds when I switch page

Does your issue happen with every document, or just one?
with only larger size document.

  const handleWebViewer = async () => {
        path: '/webviewer/lib',
        initialDoc: pdfLink,
        streaming: true,
    ).then((instance: any) => {
      console.log("instance", instance)
      if (!!instance) {

useEffect(() => {
  // Loading PDF and Annotations 
  if (pdfLink) {
}, [pdfLink]);

const addRectangleAnnotation = async () => {
    if (!pdfInstance) return
    const { Annotations, annotationManager, documentViewer } = pdfInstance.Core;
    const annotations = await annotationManager.getAnnotationsList();

  const doc = documentViewer.getDocument();
  let tempAnnotationsList: any = [];

  pdfAnnotationsData?.forEach((annotationData: any) => {

    const rectangleAnnotation = new Annotations.RectangleAnnotation();
    rectangleAnnotation.PageNumber = Number(annotationData.page);

    const pageInfo = doc.getPageInfo(rectangleAnnotation.PageNumber);
    const rotation = doc.getPageRotation(rectangleAnnotation.PageNumber);

    const rotatedCoordinates = getRotatedCoordinates(annotationData.coordinates, rotation, pageInfo)

    if (rotatedCoordinates) {
      const [rotatedX1, rotatedY1, rotatedX2, rotatedY2] = rotatedCoordinates;

      rectangleAnnotation.X = rotatedX1
      rectangleAnnotation.Y = rotatedY1
      rectangleAnnotation.Width = rotatedX2 - rotatedX1
      rectangleAnnotation.Height = rotatedY2 - rotatedY1
      rectangleAnnotation.Author = annotationManager.getCurrentUser();

      // Set your custom Data here
      rectangleAnnotation.CustomData = {
        doorId: annotationData.doorId,
        annotationType: annotationData.annotationType,
        addedType: 'programmatically'

      if (annotationData.annotationType === 'Auto') {
        // Set Read only annotation if it's detected by AI 
        rectangleAnnotation.ReadOnly = true;

        rectangleAnnotation.StrokeColor = new Annotations.Color(20, 255, 0, 1);
      } else if (annotationData.annotationType === 'Manual') {

        // Set the stroke color to black (0, 0, 0)
        rectangleAnnotation.StrokeColor = new Annotations.Color(252, 186, 3, 1);
      } else if (annotationData.annotationType === 'FalseDetected') {

        // Set the stroke color to black (0, 0, 0)
        rectangleAnnotation.ReadOnly = true;

        rectangleAnnotation.StrokeColor = new Annotations.Color(255, 0, 0, 1);
      // Set the border thickness to 10 (adjust as needed)
      rectangleAnnotation.StrokeThickness = 2;

useEffect(() => {
    // Adding annotations on the pdf
    if (pdfAnnotationsData && isDocumentLoadedSuccessfully) {
  }, [pdfAnnotationsData, isDocumentLoadedSuccessfully])

Hello Shadid,

We have a guide talking about the best practices when it comes to our viewer.

Since it is a larger file, you could consider linearizing the PDF. This should help improve loading time.

Best Regards,

Can we do Linearize PDF files at frontend side in Reacts ?
If you have any reference to do linearize pdf files please share it.

Hello Shahid,

I don’t believe we have a way to linearize our files before loading them into the viewer at the frontend side in React. This is best done on a backend server.

Okay, can you please share some reference for the backend integration of the same?

Hello Shahid,

Based on our blog post below, our recommendation is to use the Apryse SDK.

Here are some articles discussing linearization with our Apryse SDK.

1 Like