在vue3 + vite 中使用pdfjs-dist 預覽pdf文檔，pdf 全部顯示，非單頁一個一個顯示

npm i pdfjs-dist

packages.json 相關以來截圖如下

項目按需引入

import * as PDFJSViewer from 'pdfjs-dist/web/pdf_viewer';
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
import 'pdfjs-dist/web/pdf_viewer.css';

業務代碼

 const pdfDialogOpen = () => {
      nextTick(async () => {
        // 指定workerSrc屬性
        // pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
        pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker

        const loadingTask = await pdfjsLib.getDocument({
          url: state.currentPdfItem.url,
          // url: 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
          cMapUrl:'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/',
          cMapPacked: true,
          enableXfa: true
        });
        let pdf = await loadingTask.promise;
        for (let i = 1; i <= pdf.numPages; i++) {
          renderPage(pdf, i)
        }

        console.log('pdfjsLib',pdfjsLib)
        console.log('PDFJSViewer', PDFJSViewer)

      })
    }

   const renderPage = (pdfDoc, pageNumber) => {
      pdfDoc.getPage(pageNumber).then((page) => {
        const pdfPageView = new PDFJSViewer.PDFPageView({
          container: pdfContainerRef.value,
          id: pageNumber,
          scale: 1,
          eventBus:  new PDFJSViewer.EventBus(),
          defaultViewport: page.getViewport({ scale: 1 }),
          annotationLayerFactory: new PDFJSViewer.DefaultAnnotationLayerFactory(),
          renderInteractiveForms: true
        })
        pdfPageView.setPdfPage(page)
        pdfPageView.draw()
      })
    }