[Ask Help]How to render big pdf files on mobile devices(over 100 pages)

[WWK563388548]

Hello,
I have a problem where I want to display a long big pdf file (over 100 pages). however, when opening a PDF on mobile browsers like Safari, the browser enters an infinite reload loop and crushed(But it works fine on PC browsers).
So, I suspect that the issue is due to loading the entire PDF at once, which leads to insufficient memory/CPU resources.

I consulted the README and other online resources and eventually found this answer: Issue with long PDF + pagination #166.
Unfortunately, I discovered that this solution is not applicable to the current version: "vue-pdf-embed": "^2.1.0".
This is because VuePdfEmbed.getDocument(...) is not exposed in the default export(in current version?).
Therefore, I would like to ask the respected maintainers if there are any other methods or any updates for Issue with long PDF + pagination #166 to solve the problem.

thank you very much,

Regards

Here is my environment:

nuxt: v3.9.3 (client-render only, no SSR)
vue-pdf-embed: v2.1.0

Here is my logic of PDF viewer:

// pdf viewer component
<script setup lang="ts">
import { defineProps } from 'vue';
import VuePdfEmbed from 'vue-pdf-embed';
import type { PDFDocumentProxy } from 'pdfjs-dist';
import { GlobalWorkerOptions } from 'vue-pdf-embed/dist/index.essential.mjs';
import PdfWorker from 'pdfjs-dist/build/pdf.worker.mjs?url';
import useShowError from '~/composables/utils/useShowError';

interface Props {
  url: string;
}
GlobalWorkerOptions.workerSrc = PdfWorker;
const props = defineProps<Props>();

const isLoading = ref(true);
const totalPageCount = ref(0);
const { showApplicationError } = useShowError();

const rendered = ref(false);
watch(
  () => props.url,
  () => {
    if (props.url) {
      rendered.value = true;
    }
  }
);

/**
 * PDFのローディング完了時の処理
 * @param pdfInfo - PDFDocumentProxy
 */
const handleDocumentLoaded = (pdfInfo: PDFDocumentProxy) => {
  totalPageCount.value = pdfInfo.numPages;
  isLoading.value = false;
};

/**
 * ページ番号指定時のスクロール先にするため、各ページのdata属性にページ数を追加する
 */
const addDataPageNumber = () => {
  const pages = document.querySelectorAll('.vue-pdf-embed__page');
  if (!pages) return;
  pages.forEach((page, index) => {
    const pageNumber = index + 1;
    page.setAttribute('data-page-number', pageNumber.toString());
  });
};

const page = ref(1);
/**
 * 指定されたページまでスクロールする
 * @param page - スクロールするページ番号
 */
const handleScroll = (page: number) => {
  const pdfContainer = document.querySelector('.pdf-container');
  const pageElement = pdfContainer?.querySelector(`[data-page-number="${page}"]`);
  pageElement?.scrollIntoView({ block: 'center' });
};

const updatePage = (selectedPage: number) => {
  if (selectedPage > totalPageCount.value) {
    page.value = totalPageCount.value;
  }
  page.value = selectedPage;
  handleScroll(page.value);
};

const width = ref(0);

onBeforeMount(() => {
  const { clientWidth } = document.documentElement;
  const { clientHeight } = document.documentElement;
  width.value = clientWidth > clientHeight ? clientWidth : clientHeight;
});

// NOTE: cMapUrlは文字表示に必要なCharacter Mapの設定。 https://github.com/hrynko/vue-pdf-embed?tab=readme-ov-file#resources
</script>
<template>
  <ClientOnly>
    <VuePdfEmbed
      v-if="rendered"
      :source="{ cMapUrl: 'https://unpkg.com/pdfjs-dist/cmaps/', url: props.url }"
      :width="width"
      class="pdf-container m-auto"
      @loaded="
        (pdfInfo) => {
          handleDocumentLoaded(pdfInfo);
          nextTick(addDataPageNumber);
        }
      "
      @rendering-failed="showApplicationError"
      @loading-failed="showApplicationError">
    </VuePdfEmbed>
  </ClientOnly>
  <slot :page="page" :total-page-count="totalPageCount" :is-loading="isLoading" :update-page="updatePage"></slot>
</template>
<style>
/* NOTE: 再描画しないようにするため、レスポンシブで対応
         https://github.com/hrynko/vue-pdf-embed/issues/20#issuecomment-1088432658 */
canvas {
  width: 100% !important;
  height: auto !important;
}
</style>

[hrynko]

Hi @WWK563388548,

Indeed, the getDocument function was dropped in v2, however the useVuePdfEmbed composable function was introduced instead.

Please check #230