前端 使用 pdf.js加载PDF文件

一、定义承载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全文全部加载完成，会存在加载慢的情况。