关于vue-pdf-embed的使用

admin管理员组

文章数量:1649192

版本：vue-pdf-embed:   v2.0.4

      node:v16.20.2

<template>

<div class="about">
  <el-button-group>
    <el-button @click="handleClick('prev')" :disabled="currPage === 1">上一页</el-button>
    <el-button @click="handleClick('next')" :disabled="currPage === totalPages">下一页</el-button>
    <el-button @click="handleClick('zoomOut')">放大</el-button>
    <el-button @click="handleClick('zoomIn')">缩小</el-button>
    <el-button @click="handleClick('turnLeft')">左旋转</el-button>
    <el-button @click="handleClick('turnRight')">右旋转</el-button>
    <el-button @click="handleClick('reset')">重置</el-button>
     <el-button @click="handleDownload">下载</el-button>
    <el-button @click="handlePrint">打印</el-button>
    <p>当前页码：{{currPage}} / {{ totalPages }}</p>
 </el-button-group>
<div class="pdfWrapper" v-loading="loading" element-loading-text="加载文档中...">
<VuePdfEmbed ref="pdfRef" @internal-link-clicked="linkClick" @loaded="handleLoaded" :style="scalePix" @progress="handleProgress" @loading-failed="handleError" :rotation="rotation" :scale="scale" :page="currPage" :annotation-layer="false" :text-layer="false" :source="pdfUrl"></VuePdfEmbed>
</div>
</div>
</template>
<script setup lang="ts">
import {ref,reactive,computed,onMounted} from 'vue'
import VuePdfEmbed,{useVuePdfEmbed} from 'vue-pdf-embed';
import "vue-pdf-embed/dist/style/index.css"
import 'vue-pdf-embed/dist/style/annotationLayer.css'
import 'vue-pdf-embed/dist/style/textLayer.css'
const pdfUrl = 'http://mhsns.leadal/file/file/profiles/applications/2024/06/25/d08506d71ff14c40b3eaa0f16312b3af.pdf?token=2053a0e77b974ac00cc9de67128d1f75&ts=1719310562&et=0'
// const pdfUrl = 'https://course.leadal/file/group1/M00/00/9A/rBRoCGZYF1qAcYn-AI7ntBRBAtA07_049236218_main.pdf?token=9a5ceaf66780526f931e0d51c64ea2c3&ts=1718872291&et=0'
const currPage = ref<number>(1)
const totalPages = ref<number>(0)
const scale = ref<number>(1)
const rotation = ref<number>(0)
const pdfRef = ref()
// const result = useVuePdfEmbed({
// source:pdfUrl
// })
const handleClick = (flag:string) => {
if(flag === 'prev'){
if(currPage.value === 1) return
currPage.value--
}else if(flag ==='next') {
if(currPage.value === totalPages.value) return
currPage.value++
}else if(flag === 'zoomOut'){
if(scale.value > 2) return
scale.value = scale.value * 1.1
}else if(flag === 'zoomIn'){
if(scale.value < 0.5) return
scale.value = scale.value / 1.1
}else if(flag === 'turnLeft'){
rotation.value = rotation.value - 90
}else if(flag === 'turnRight'){
rotation.value = rotation.value + 90
}else if(flag === 'reset') {
rotation.value = 0
scale.value = 1
}
}
const scalePix = computed(() => {
return `transform:scale(${scale.value})`
})
const loading = ref<boolean>(false)
const handleLoaded = (val:any) =>{
totalPages.value = val.numPages
console.log(val,'加载完成！！')
loading.value = false
}
const handleError = (val:any) =>{
loading.value = false
console.log('文档获取失败！！！'+val)
}
const handleDownload = () =>{
pdfRef.value?.download('该起什么名字呢？')
}
const handlePrint = () =>{
// print（打印分辨率，过高界面预览会有问题，名称，是否打印全部）
pdfRef.value?.print(100,'爱情是什么',true)
}
const handleProgress = (val:any) =>{
loading.value = true
// console.log(val,99)
}
// 内部链接点击触发
const linkClick = (page:number) => {
console.log(page,9999)
}
</script>
<style>
@media (min-width: 1024px) {
.about {
min-height: 100vh;
}
}
.pdfWrapper {
width: 600px;
min-height: 300px;
overflow: hidden auto;
border: 1px solid #eee;
}
</style>

本文标签： vuePDFembed