一、定义承载pdf的容器

<template>    <div>        <div id="pdfContainer"></div>    </div></template>

二、加载pdf

<script lang="ts" setup>import pdf from './components/230402643.pdf'import { getDocument } from 'pdfjs-dist'import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs'import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs'const pdfLoader = async () => {    pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker    const container = document.getElementById('pdfContainer')    const loadingTask = getDocument(pdf);    loadingTask.promise.then(doc => {        // console.log(doc)        const numPages = doc.numPages        totalPage.value = doc.numPages        // console.log('Number of Pages:', numPages) // pdf页数        let lastPromise // will be used to chain promises        lastPromise = doc.getMetadata().then(metadata => {            // console.log('metadata  = ', metadata)            // console.log('Metadata is:', JSON.stringify(metadata, null, 2))            if(metadata.metadata) {                // console.log('All Metadata:', metadata.metadata.getAll())            }        })        const loadPage = (pageNum) => {            return doc.getPage(pageNum).then(page => {                // console.log('# Page ' + pageNum)                const viewport = page.getViewport({ scale: 1.0 })                // console.log('size = ', viewport.width + 'x' + viewport.height)                const canvas = document.createElement('canvas');                const context = canvas.getContext('2d');                canvas.height = viewport.height;                canvas.width = viewport.width;                container.appendChild(canvas);                page.render({ canvasContext: context, viewport})                return page.getTextContent().then(content => {                    const strings = content.items.map(item => {                        // console.log('content item:', item)                        return (item as any).str                    })                    // console.log('## Text Content:', strings.join(' '))                    page.cleanup()                })            })        }        for(let i = 1; i <= numPages; i++) {            lastPromise = lastPromise.then(loadPage.bind(null, i))        }        return lastPromise    }).catch(err => {        // console.log('err = ', err)    })}</script>

说明：上述方法是将pdf全文全部加载完成，会存在加载慢的情况。