<template>
|
<div class="pdf-full-view">
|
<div v-for="(item, index) in canvases" :key="index" class="pdf-page">
|
<canvas :ref="el => canvasRefs[index] = el"></canvas>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted, watch ,nextTick } from 'vue'
|
import * as pdfjsLib from 'pdfjs-dist'
|
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
|
|
const props = defineProps<{
|
src: string
|
scale?: number
|
}>()
|
|
const canvasRefs: HTMLCanvasElement[] = []
|
const canvases = ref<number[]>([]) // 用来控制渲染多少页 canvas
|
const pdfDoc = ref<any>(null)
|
const scale = props.scale ?? 1.2
|
|
const renderAllPages = async () => {
|
const loadingTask = pdfjsLib.getDocument(props.src)
|
pdfDoc.value = await loadingTask.promise
|
const numPages = pdfDoc.value.numPages
|
canvases.value = Array.from({ length: numPages }, (_, i) => i + 1)
|
|
// 等 canvasRefs 准备好后再渲染每页
|
await nextTick()
|
|
for (let pageNum = 1; pageNum <= numPages; pageNum++) {
|
const page = await pdfDoc.value.getPage(pageNum)
|
const viewport = page.getViewport({ scale })
|
const canvas = canvasRefs[pageNum - 1]
|
if (!canvas) continue
|
const context = canvas.getContext('2d')
|
canvas.height = viewport.height
|
canvas.width = viewport.width
|
await page.render({ canvasContext: context!, viewport }).promise
|
}
|
}
|
|
onMounted(renderAllPages)
|
</script>
|
|
<style scoped>
|
.pdf-full-view {
|
text-align: center;
|
}
|
|
.pdf-page {
|
margin-bottom: 20px;
|
}
|
</style>
|
