vue项目中使用 vue-pdf 预览文件

git地址：https://github.com/FranckFreiburger/vue-pdf#readme

1.下载

npm install --save vue-pdf

2.引入

	<template>
		<div class="wrapper">
			    <p class="arrow">
			    // 上一页
			    <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span>
			    {{currentPage}} / {{pageCount}}
			    // 下一页
			    <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">Next</span>
			    </p>
    // 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了
			<pdf :src="src"   //pdf的地址 可以是一个网络地址， 也可以是一个本地的地址
				:page="currentPage" // 当前展示的PDF页码
		      @num-pages="pageCount=$event" // PDF文件总页码
		      @page-loaded="currentPage=$event" // 一开始加载的页面
		      @loaded="loadPdfHandler"> // 加载事件
		    </pdf>
		<div>
	</template>	
	
	<script>
		import pdf from "vue-pdf"			//这里是引入
		export default{
			name:"testvuepdf",
			components:{
				pdf							//这里引入组件
			}
			data () {
		      return {
		        currentPage: 0, // pdf文件页码
		        pageCount: 0, // pdf文件总页数
		        fileType: 'pdf', // 文件类型　　　　　
		        src: '', // pdf文件地址     
		      }
		    },
			created: {　　　　// 有时PDF文件地址会出现跨域的情况,这里最好处理一下　　　　
				this.src = pdf.createLoadingTask(this.src)  //这里注意src不要为空， 不然会报错的    如果是一个静态的pdf  文件， 就不要这一行操作， 比如说， 我们在 vue的 public 文件中放了一个 a.pdf  文件， 那么 data 中的 src:'/a.pdf'  就可以了
		　　},
		　　methods:{
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
		      changePdfPage (val) {
		        // console.log(val)
		        if (val === 0 && this.currentPage > 1) {
		          this.currentPage--
		          // console.log(this.currentPage)
		        }
		        if (val === 1 && this.currentPage < this.pageCount) {
		          this.currentPage++
		          // console.log(this.currentPage)
		        }
		      },
		
		      // pdf加载时
		      loadPdfHandler (e) {
		        this.currentPage = 1 // 加载的时候先加载第一页
		      }
			}
		}
	</script>

还有一个供参考的地址 vue-pdf参考