用vue-pdf包实现pdf文件预览，支持分页_vue-pdf 源码

vue项目实现pdf文件预览功能

下载vue-pdf包

npm install --save vue-pdf
1

template模板内容：

//pdf组件
<pdf :src="pdfFile" 
	:page="currentPage" 
	@num-pages="pageCount=$event" 
	@page-loaded="currentPage=$event" 
	@loaded="loadPdf">
</pdf>

//分页
<div class="pageButton">
      <el-button size="mini" @click="changePage(0)" round>上一页</el-button>
      <span> {{currentPage}} / {{pageCount}} </span>
      <el-button size="mini" @click="changePage(1)" round>下一页</el-button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

引入组件，定义变量

//vue文件内导入并引用
import pdf from "vue-pdf";
export default {
	components: {
	    pdf,
	 },
	
	//定义变量
	data(){
		return {
			pdfFile: "", //pdf文件地址
	      	currentPage: 0, // 页码
	      	pageCount: 0, // 总页数
		}
	},
	methods:{
		// 翻页
	    changePage (val) {
	      	if (val === 0 && this.currentPage > 1) {
	        	this.currentPage --;
	      	}
	      	if (val === 1 && this.currentPage < this.pageCount) {
	        	this.currentPage ++;
	      	}
	    },
      	// pdf加载时
	    loadPdf () {
	      	this.currentPage = 1 // 加载的时候先加载第一页
	    },
	}
}
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