gpt4 book ai didi

vue中使用vue-pdf的方法详解

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue中使用vue-pdf的方法详解由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

需求:简单说~~有两个pdf文件需在h5上展示,通过点击按钮切换不同文件的显示 。

注:

1.vue-pdf默认展示首页,我这里的需求是通过滑动展示所有页面,这里使用的v-for遍历。有多少页就加载了多少个pdf组件.

2.pdf文件存在跨域问题,这个需要后端同学支持.

3.demo上的pdf文件只有一页,测试多页展示,自己改用多页pdf文件即可 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<template>
  <div class= "pdf_wrap" >
   <div class= "pdf_list" >
    <!-- src:pdf地址,page: 当前显示页 -->
    <pdf v- for = "i in numPages" :key= "i" :src= "src" :page= "i" style= "width: 100%" > </pdf>
   </div>
   <Button type= "info" @click= "loadPdf(pdfUrl1)" >
    文件1
   </Button>
    <Button type= "info" native-type= "submit" @click= "loadPdf(pdfUrl2)" >
    文件2
   </Button>
  </div>
</template>
 
<script>
import pdf from 'vue-pdf'
import { Button } from 'vant'
export default {
  components: {
   pdf, Button
  },
  data () {
   return {
    src: '' ,
    numPages: undefined,
    pdfUrl1: 'https://clinic-trial-attachments.oss-cn-beijing.aliyuncs.com/output/demo.pdf/1.pdf' ,
    pdfUrl2: 'https://clinic-trial-attachments.oss-cn-beijing.aliyuncs.com/output/123demo'
   }
  },
  mounted () {
   this .loadPdf( this .pdfUrl1)
  },
  methods: {
   loadPdf (url) {
    this .src = pdf.createLoadingTask(url)
    this .src.promise.then(pdf => {
     this .numPages = pdf.numPages // 这里拿到当前pdf总页数
    })
   }
  }
}
</script>
<style scoped>
  .pdf_wrap {
   background: #fff;
   height: 100vh
  }
  .pdf_list {
   height: 80vh;
   overflow: scroll;
  }
  button {
   margin-bottom: 20px;
  }
</style>

总结 。

到此这篇关于vue中使用vue-pdf的方法详解的文章就介绍到这了,更多相关vue使用vue-pdf内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我! 。

原文链接:https://blog.csdn.net/Snow_GX/article/details/108408162 。

最后此篇关于vue中使用vue-pdf的方法详解的文章就讲到这里了,如果你想了解更多关于vue中使用vue-pdf的方法详解的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com