1 <template>
2 <div class="pdfPreview" ref="pdfPreview" id="pdfPreview">
3 <pdf
4 v-for="page in pageNum"
5 :key="page"
6 :page="page"
7 :src="url"
8 ></pdf>
9 </div>
10 </template>
11
12
13 <script>
14 //使用npm install的方式将包加入到项目package.json
15 import pdf from 'vue-pdf'
16
17 export default {
18 name: 'Pdf',
19 components: {
20 pdf
21 },
22 data () {
23 return {
24 pdf:'',
25 filePath: this.$route.params.filePath,
26 fileName: this.$route.params.fileName,
27 token: this.$cookie.get('token'),
28 url: '',
29 //懒加载页数
30 pageNum: 1,
31 //总页数
32 numPages: '',
33 height: '',
34 }
35 },
36
37 activated () {
38 this.init();
39 this.getScroll()
40 },
41 mounted() {//实时监听滚动条的变化
42 window.addEventListener('scroll', this.getScroll,true)
43 },
44 destroyed() {//注意：监听的函数要在关闭页面时销毁掉,不然会影响到其它页面
45 window.removeEventListener('scroll', this.getScroll)
46 },
47 methods: {
48 init () {
49 //获取下载地址链接
50 this.url = this.filePath + '&proviewFlag=' + 'true'
51 this.url = pdf.createLoadingTask(this.url);
52 this.url.promise.then(pdf => {
53 this.pdf = pdf
54 this.numPages = pdf.numPages;
55 //滚动加载
56 this.getScroll();
57 });
58 },
59 getScroll(e) {
60 console.log(e.target.scrollTop ,'滚动高度')
61 const scrollTop = e.target.scrollTop
62 if(this.fileName.indexOf('pdf')!=-1){
63 this.height = 1300
64 }else {
65 this.height = 550
66 }
67 console.log(this.pageNum, this.height*(this.pageNum-1),scrollTop,this.height*(this.pageNum+1))
68 if ((scrollTop > this.height*(this.pageNum-1))&&(scrollTop < this.height*(this.pageNum+1))) { //懒加载条件限制判断
69 if (this.pageNum < this.numPages) {//做一次判断
70 //达到条件后执行这个函数
71 this.pageNum += 1
72 // this.pdf.getPage(this.pageNum).then(page => {
73 // console.log(page,'page')
74 // })
75 console.log('达到加载条件，执行加载');
76 }
77 }
78 },
79 // 获取pdf页数
80 getNumPages () {
81 console.log(this.url,'page')
82 let loadingTask = pdf.createLoadingTask(this.url)
83 loadingTask.promise.then(pdf => {
84 this.numPages = pdf.numPages
85 }).catch(err => {
86 this.numPages = 0
87 console.error('pdf 加载失败', err)
88 })
89 },
90 }
91 }
92 </script>
