When using pdf to load large files, how to speed up or other ways to solve the problem of slow loading

[yangnanle]

pdf: pdf-file

My environment

• vue3+ts
• pdfjs-dist@^4.3.136
• Windows

My scene

During the OnMounted life cycle, the pdf access address is obtained. The preview area only shows the content of one page, and renders the content of a page when the user clicks on the next/previous page.

My question

If the file is too large, it will load slowly and the user experience will be bad

Because the pdf page number is to be obtained elsewhere, loading the pdf is encapsulated as a method
Here's my code:

import * as pdfjsLib from 'pdfjs-dist';
export const getPdfFileStream = (url: string | ArrayBuffer): Promise<pdfjsLib.PDFDocumentProxy> => {
  return new Promise(async (resolve, reject) => {
    if (typeof window !== 'undefined' && !pdfjsLib.GlobalWorkerOptions.workerSrc) {
      pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.min.mjs';
    }
    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then((pdf: pdfjsLib.PDFDocumentProxy) => {
      resolve(pdf);
    }).catch((error: any) => {
      reject(error);
    })
  })
};

<script setup lang="ts">
import { ref, onMounted, nextTick, reactive, onUnmounted, watch,} from "vue";
import { getPdfFileStream } from "@/utils/common";
import * as pdfjsLib from "pdfjs-dist";
import { ElMessage } from "element-plus";

const props = defineProps({
  // The current page number to load
  loadPageNum: { type: Number, required: true, default: 1 },
});
const loading = ref(true);
let pdfDocStream: pdfjsLib.PDFDocumentProxy | any = reactive({}); 
let pdfScale = ref(3); 

const renderPage = (num: number) => {
  if (!pdfDocStream || typeof pdfDocStream.getPage !== 'function') {
    console.error('pdfDocStream is not available or does not have getPage method');
    return;
  }
  pdfDocStream.getPage(num).then((page: any) => {
    const container = document.getElementById('container') as HTMLDivElement
    const canvas = document.getElementById("pdfCanvas") as HTMLCanvasElement;
    const ctx = canvas.getContext("2d");
    const viewport = page.getViewport({ scale: pdfScale.value });
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    canvas.style.width = "100%";
    canvas.style.height = "100%";
    const renderContext = {
      canvasContext: ctx,
      viewport: viewport,
    };
    page.render(renderContext)
    loading.value = false
  });
};

onMounted(() => {
  setTimeout(()=>{
    // 模拟请求得到url
    const url = 'https://XXXXXXXXXXXXX'
    loadFile(url)
  }, 1000)
});

const loadFile = async (url: string) => {
  try {
    const res = await getPdfFileStream(url);
    pdfDocStream = res;
    if (pdfDocStream) renderPage(props.loadPageNum)
  } catch (error) {
    ElMessage.error('加载出错')
    loading.value = false
  }
};

const watchFn = watch(
  () => props.loadPageNum,
  (newPage) => {
    renderPage(newPage);
  }, {
  deep: true, 
}
);
onUnmounted(() => {
  watchFn();
});
</script>

My expectation

• Is there any way to speed it up?
• Or is it possible to parse the flow of documents for just one page and render the page?
• Maybe there's another way. I hope I can get help.