Way to render 200+ page pdfs efficiently?

[chronicadventure]

It seems to take a ton of CPU and makes tabs unresponsive

[TaTo30]

I have used Range-Request to achieve a optimal PDF loading.

For example, on one of my projects I have this setup:

const document = ref()

// ...

const { pdf: src, pages: numPages, info } = usePDF(document)

export default function () {
   // composable content
  
   // At some point of the app lifecycle...
   function initLoad () {
     documento.value = {
       url: selectedDocument.value.bytes,
        rangeChunkSize: 1024 ** 2,
        disableStream: true,
        disableAutoFetch: true
      }
   }
}

The server must support Range-Request, here an example using python with werkzeug server:

if stream.mimetype == 'application/pdf':
    headers = [
        ("Content-Type", "application/pdf"),
        ("Accept-Ranges", "bytes"),
        ("Content-Encoding", "identity"),
        ("Access-Control-Expose-Headers", 'Accept-Ranges'),
    ]

    stream_bytes = stream.read()
    if request.range:
        content_range = request.range.make_content_range(len(stream_bytes))
        if content_range.stop <= len(stream_bytes):
            headers.append(('Content-Range', f'bytes {str(content_range.start), str(content_range.stop), str(len(stream_bytes))}'))
            stream_bytes = stream_bytes[content_range.start:content_range.stop]
            headers.append(('Content-Length', len(stream_bytes)))
            return request.make_response(stream_bytes, headers=headers, status=206)
        elif content_range.stop > len(stream_bytes):
            LOGGER.info(f"Range-Request de peticion invalida {request.range}")
            return request.make_response(stream_bytes, headers=headers, status=416)
    return request.make_response(stream_bytes, headers=headers, status=200)

Another approach is loading the pages in a progressive way or batches, just load 50 pages at the beginning and put a placeholder where the pages are not required loading at the beginning, so when the placeholder appears on the viewport the page can starts loading.

[chronicadventure]

Thank you for the reply. It seems like my implementation will be more difficult. I can't just use ranges because sometimes when the PDF is loaded, I have to automatically scroll it to a specific page. I won't know how to map byte ranges -> pages.

I'll keep thinking about how to tackle this, perhaps save each page individually as a blob (which I already do) then have a back end service that takes a range of pages, downloads all blobs, and joins them into a single pdf.

Anyway, I noticed another problem that I would like to tackle first before handling this pagination stuff, it appears that the Worker being spawned with the component is not terminating when I navigate away from the vue. I'm on Mac, on the task manager from chrome it shows 500mb worker when I open a specific pdf. I navigate away and see the memory usage remains. I open the same pdf and it keeps adding another 500mb to the worker.

Here is a screen shot

And here is a simplified markup for my component.

    <ClientOnly>
      <div class="bg-document-toolbar">
        <div class="relative my-1 rounded-md shadow-sm pl-2">
          <Icon name="bi:zoom-in" class="icon-light absolute inset-y-0 left-0"></Icon>
          <input tabindex="-1" :autofocus="false" v-model="zoom" title="Zoom" step="10" type="number" max="200" min="10" class="ml-2 font-semibold leading-1 h-4 block w-16 rounded-md border-0 py-1.5 text-gray-900 ring-1 ring-inset
             ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-xs" />
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
            <span class="text-gray-500 sm:text-sm font-semibold">%</span>
          </div>
        </div>
      </div>
      <div ref="contentArea" class="pdf-container overflow-y-scroll h-full">
        <div v-for="page in pages" :key="page" class="my-2" :id="`page-${page}`">
          <VuePDF v-if="isSinglePage" text-layer :scale="scale" :pdf="pdf" :page="page"></VuePDF>
          <VuePDF v-else-if="!isSinglePage && targetPages.includes(page)" text-layer :scale="scale" :pdf="pdf" :page="page" />
          <VuePDF v-else :scale="scale" :pdf="pdf" :page="page"/>
        </div>
      </div>
    </ClientOnly>
  </template>
  
  <script setup>
  import { VuePDF, usePDF } from '@tato30/vue-pdf';
  import '@tato30/vue-pdf/style.css';
  

  const props = defineProps({
    url: {
      type: String,
      default: null
    },
    targetPages: {
      type: Array
    },
    highlightText: {
      type: String
    },
    clickedPage: {
      type: Number
    },
    isSinglePage: {
      type: Boolean,
      default: false
    },
    isMobileView: {
      type: Boolean,
      default: false
    }
  });
  
  const zoom = ref(100);
  const scale = computed(() => zoom.value / 100);
  const contentArea = ref(null);
  const { pdf, pages } = usePDF(props.url);
  </script> 

[TaTo30]

I have to automatically scroll it to a specific page. I won't know how to map byte ranges -> pages.

I don't think you need to aware about this, pdf.js will handle it on demand and will request all the bytes needed to render the pages and even if the pages are not loaded yet they already are in the DOM tree so you can scroll to them.

[chronicadventure]

This was my fix, but I believe the library should be doing this on it's own

... script setup
const { pdf, pages } = usePDF(props.url);

onUnmounted(() => {
  if (pdf.value && pdf.value._worker && pdf.value._worker._webWorker) {
    pdf.value._worker._webWorker.terminate(); // Terminate the worker manually
  }
})

[TaTo30]

Thanks for the fix, I added to the library as a base behavior (#148)