当前位置:   article > 正文

关于vue-pdf-embed的使用_vue-pdf-embed使用

vue-pdf-embed使用

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

      node:v16.20.2

  1. <template>
  2. <div class="about">
  3. <el-button-group>
  4. <el-button @click="handleClick('prev')" :disabled="currPage === 1">上一页</el-button>
  5. <el-button @click="handleClick('next')" :disabled="currPage === totalPages">下一页</el-button>
  6. <el-button @click="handleClick('zoomOut')">放大</el-button>
  7. <el-button @click="handleClick('zoomIn')">缩小</el-button>
  8. <el-button @click="handleClick('turnLeft')">左旋转</el-button>
  9. <el-button @click="handleClick('turnRight')">右旋转</el-button>
  10. <el-button @click="handleClick('reset')">重置</el-button>
  11. <el-button @click="handleDownload">下载</el-button>
  12. <el-button @click="handlePrint">打印</el-button>
  13. <p>当前页码:{{currPage}} / {{ totalPages }}</p>
  14. </el-button-group>
  15. <div class="pdfWrapper" v-loading="loading" element-loading-text="加载文档中...">
  16. <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>
  17. </div>
  18. </div>
  19. </template>
  20. <script setup lang="ts">
  21. import {ref,reactive,computed,onMounted} from 'vue'
  22. import VuePdfEmbed,{useVuePdfEmbed} from 'vue-pdf-embed';
  23. import "vue-pdf-embed/dist/style/index.css"
  24. import 'vue-pdf-embed/dist/style/annotationLayer.css'
  25. import 'vue-pdf-embed/dist/style/textLayer.css'
  26. const pdfUrl = 'http://mhsns.leadal.com/file/file/profiles/applications/2024/06/25/d08506d71ff14c40b3eaa0f16312b3af.pdf?token=2053a0e77b974ac00cc9de67128d1f75&ts=1719310562&et=0'
  27. // const pdfUrl = 'https://course.leadal.com/file/group1/M00/00/9A/rBRoCGZYF1qAcYn-AI7ntBRBAtA07_049236218_main.pdf?token=9a5ceaf66780526f931e0d51c64ea2c3&ts=1718872291&et=0'
  28. const currPage = ref<number>(1)
  29. const totalPages = ref<number>(0)
  30. const scale = ref<number>(1)
  31. const rotation = ref<number>(0)
  32. const pdfRef = ref()
  33. // const result = useVuePdfEmbed({
  34. // source:pdfUrl
  35. // })
  36. const handleClick = (flag:string) => {
  37. if(flag === 'prev'){
  38. if(currPage.value === 1) return
  39. currPage.value--
  40. }else if(flag ==='next') {
  41. if(currPage.value === totalPages.value) return
  42. currPage.value++
  43. }else if(flag === 'zoomOut'){
  44. if(scale.value > 2) return
  45. scale.value = scale.value * 1.1
  46. }else if(flag === 'zoomIn'){
  47. if(scale.value < 0.5) return
  48. scale.value = scale.value / 1.1
  49. }else if(flag === 'turnLeft'){
  50. rotation.value = rotation.value - 90
  51. }else if(flag === 'turnRight'){
  52. rotation.value = rotation.value + 90
  53. }else if(flag === 'reset') {
  54. rotation.value = 0
  55. scale.value = 1
  56. }
  57. }
  58. const scalePix = computed(() => {
  59. return `transform:scale(${scale.value})`
  60. })
  61. const loading = ref<boolean>(false)
  62. const handleLoaded = (val:any) =>{
  63. totalPages.value = val.numPages
  64. console.log(val,'加载完成!!')
  65. loading.value = false
  66. }
  67. const handleError = (val:any) =>{
  68. loading.value = false
  69. console.log('文档获取失败!!!'+val)
  70. }
  71. const handleDownload = () =>{
  72. pdfRef.value?.download('该起什么名字呢?')
  73. }
  74. const handlePrint = () =>{
  75. // print(打印分辨率,过高界面预览会有问题,名称,是否打印全部)
  76. pdfRef.value?.print(100,'爱情是什么',true)
  77. }
  78. const handleProgress = (val:any) =>{
  79. loading.value = true
  80. // console.log(val,99)
  81. }
  82. // 内部链接点击触发
  83. const linkClick = (page:number) => {
  84. console.log(page,9999)
  85. }
  86. </script>
  87. <style>
  88. @media (min-width: 1024px) {
  89. .about {
  90. min-height: 100vh;
  91. }
  92. }
  93. .pdfWrapper {
  94. width: 600px;
  95. min-height: 300px;
  96. overflow: hidden auto;
  97. border: 1px solid #eee;
  98. }
  99. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Li_阴宅/article/detail/934937
推荐阅读
相关标签
  

闽ICP备14008679号