赞
踩
版本: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.com/file/file/profiles/applications/2024/06/25/d08506d71ff14c40b3eaa0f16312b3af.pdf?token=2053a0e77b974ac00cc9de67128d1f75&ts=1719310562&et=0'
- // const pdfUrl = 'https://course.leadal.com/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>

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。