vue 使用 vue-pdf 实现pdf在线预览_vue pdf 预览第一页

vue 使用 vue-pdf 实现pdf在线预览

1、安装

npm install --save vue-pdf
1

2、引用

import pdf from 'vue-pdf'
export default {
	components: { pdf },
	data() {
		return {
            pdfUrl: "pdf的路径" ,// 本地获取或者在线请求获取
		};
	},
};
1
2
3
4
5
6
7
8
9

3、页面使用

<div class="content">
      <pdf
          ref="pdf"
          :src="pdfUrl" 
      ></pdf>
  </div>
1
2
3
4
5
6

4、发现问题，只能显示一页,显示所有页面

<div class="content">
    <pdf
        ref="pdf"
        v-for="item in numPages"
        :key="item"
        :page="item"
        :src="pdfSrc" 
    ></pdf>
</div>


import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
	components: { pdf },
	data() {
		return {
            numPages: "",  // pdf 文件总页数
            pdfSrc: "",
            pdfUrl: "", // pdf 文件的路径，可以是本地路径，也可以是在线路径
		};
	},
	mounted: {
	   this.getTitlePdfurl()
	},
	methods: {
	    getTitlePdfurl(){
            this.pdfSrc = pdf.createLoadingTask({url: this.pdfUrl},CMapReaderFactory);//解决中文乱码问题
            this.pdfSrc.promise.then(pdf => {
                this.numPages = pdf.numPages
            }).catch(err => {
                console.error('pdf 加载失败', err)
            })
        },  
	}
};
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

5、想一页一页的翻加载

<div class="content">
		<pdf
			ref="pdf"
			:page="numPages"
			:src="pdfUrl"
			:rotate="pageRotate" 
			@progress="loadedRatio = $event"
			@page-loaded="pageLoaded($event)" 
			@num-pages="pageTotalNum=$event" 
			@error="pdfError($event)" 
			@link-clicked="page = $event" 
		></pdf>
		<div class="options-btn">
			<el-button  @click="prePage" > 上一页</el-button>
			<el-button  @click="nextPage" > 下一页</el-button>
			<el-button  @click="clockwise" > 顺时针</el-button>
			<el-button  @click="antiClockwise" > 逆时针</el-button>
		</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import pdf from 'vue-pdf'
export default {
	components: { pdf },
	data() {
		return {
            numPages: 1, // 当前页
            pdfUrl: "http://....xx.pdf", //
            pageRotate: 0, // 旋转的角度
			loadedRatio: 0, // 加载进度
			curnumPages: 0, // 加载时的回调当前页
            pageTotalNum: 1, // 总的页数
		};
	},
	methods: {
		prePage() { // 上一页
			var page = this.numPages
			page = page > 1 ? page - 1 : this.pageTotalNum
			this.numPages = page
		},
		nextPage() { //下一页
			let page = this.numPages
			page = page < this.pageTotalNum ? page + 1 : 1
			this.numPages = page
		},  
		clockwise() { // 页面顺时针翻转90度。
			this.pageRotate += 90
		},
		antiClockwise() {   // 页面逆时针翻转90度。
			this.pageRotate -= 90
		},
		pageLoaded(e) { // 加载时的回调
			this.curnumPages = e
		},
		pdfError(error) { // 错误的时候回调
			console.error(error)
		},
	}
};
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

写在最后：
以上就是一般使用vue-pdf的一些使用写法，前端小弟正在努力记录ing~