<template>
|
<div class="pdf-div flex flex-col justify-center items-center">
|
<!-- canvas 占满屏幕 -->
|
<canvas ref="canvasRef" class="canvas-full"></canvas>
|
<!-- 分页控制 -->
|
<div class="text-center m-1 ">
|
<el-link type="primary" @click="prevPage">上一页</el-link>
|
<span class="mx-4 text-xs">当前第 {{ page }} 页，共 {{ totalPages }} 页</span>
|
<el-link type="primary" @click="nextPage">下一页</el-link>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, watch, onMounted } from 'vue'
|
import * as pdfjsLib from 'pdfjs-dist'
|
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'
|
|
const props = defineProps<{
|
src: string
|
scale?: number
|
}>()
|
|
const canvasRef = ref<HTMLCanvasElement | null>(null)
|
const page = ref(1)
|
const pdfDoc = ref<any>(null)
|
const totalPages = ref(0)
|
const scale = props.scale ?? 1.2
|
|
const renderPage = async (num: number) => {
|
if (!pdfDoc.value) return
|
const pageObj = await pdfDoc.value.getPage(num)
|
const viewport = pageObj.getViewport({ scale })
|
const canvas = canvasRef.value
|
if (!canvas) return
|
const context = canvas.getContext('2d')
|
canvas.height = viewport.height
|
canvas.width = viewport.width
|
await pageObj.render({ canvasContext: context!, viewport }).promise
|
}
|
|
const loadPdf = async () => {
|
const loadingTask = pdfjsLib.getDocument(props.src)
|
pdfDoc.value = await loadingTask.promise
|
totalPages.value = pdfDoc.value.numPages
|
renderPage(page.value)
|
}
|
|
|
watch(page, renderPage)
|
onMounted(loadPdf)
|
|
|
|
const prevPage = () => {
|
if (page.value > 1) page.value--
|
}
|
const nextPage = () => {
|
if (page.value < totalPages.value) page.value++
|
}
|
</script>
|
<style scoped>
|
.pdf-div {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
height: 100%; /* 如果需要填充整个容器高度，可以设置 */
|
}
|
.canvas-full {
|
width: 100%; /* 让 canvas 宽度占满父容器 */
|
height: 90%; /* 让 canvas 高度占满父容器 */
|
}
|
</style>
|
|
