1. 前言
PDF文件在线预览的功能相信大家都是有遇到过的, 但在我平时的项目中, 公司提供了相应的插件, 但是在h5等其他项目中, 我们还是只能靠自己呀! 今天就大概说一下vue-pdf这个组件, 大部分的需求还是可以满足的
2. 安装
npm install --save vue-pdf
3. pdf 页面显示
3.1 code
<template><div><pdf ref="pdf":src="url"></pdf></div></template>
<script>import pdf from 'vue-pdf'export default {components:{pdf},data(){return {url:"http://image./nodejs.pdf",}}</script>
3.2 展示
这个时候, pdf文件已经显示在页面上了, 但是我们可以发现, 这仅仅显示了pdf 文件的第一页
4. pdf 显示多页
4.1 code
<template><div><pdfref="pdf"v-for="i in numPages" :key="i" :src="url" :page="i"></pdf></div></template>
<script>import pdf from 'vue-pdf'export default {components:{pdf},data(){return {url:"http://image./nodejs.pdf",numPages: null, // pdf 总页数}},mounted() {this.getNumPages()},methods: {# 计算pdf页码总数getNumPages() {let loadingTask = pdf.createLoadingTask(this.url)loadingTask.promise.then(pdf => {this.numPages = pdf.numPages}).catch(err => {console.error('pdf 加载失败', err);})},}</script>
4.2 展示
这时候我们可以通过滑动预览pdf的内容, 但是这种方式是一下子把pdf的内容都加载出来, 页数一多, 浏览器直接卡在加载的状态, 体验感太差,所以我们可以考虑按页加载
5. pdf 按页预览
5.1 code
<template><div><el-button-group><el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button><el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group><div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div><pdf:page="pageNum":src="url"@progress="loadedRatio = $event"@num-pages="pageTotalNum=$event" ></pdf></div></template>
<script>import pdf from 'vue-pdf'export default {name: 'Pdf',components: {pdf,},data() {return {url: 'http://image./nodejs.pdf',pageNum: 1,pageTotalNum: 1, # 总页数loadedRatio: 0, # 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了}},methods: {// 上一页prePage() {let page = this.pageNumpage = page > 1 ? page - 1 : this.pageTotalNumthis.pageNum = page},// 下一页nextPage() {let page = this.pageNumpage = page < this.pageTotalNum ? page + 1 : 1this.pageNum = page}}}</script>
5.2 展示
至此, 大概效果就如上所示
6. 更多内容
npm vue-pdf
来自：vue-pdf实现pdf文件在线预览 - 简书
