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

下载vue-pdf包

npm install --save vue-pdf

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>

引入组件，定义变量

//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 // 加载的时候先加载第一页
	    },
	}
}