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

一、定义承载pdf的容器

<template>
    <div>
        <div id="pdfContainer"></div>
    </div>
</template>
1
2
3
4
5

二、加载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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

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