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

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

1、安装

npm install --save vue-pdf

2、引用

import pdf from 'vue-pdf'
export default {
	components: { pdf },
	data() {
		return {
            pdfUrl: "pdf的路径" ,// 本地获取或者在线请求获取
		};
	},
};

3、页面使用

<div class="content">
      <pdf
          ref="pdf"
          :src="pdfUrl" 
      ></pdf>
  </div>

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)
            })
        },  
	}
};

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>

import pdf from 'vue-pdf'
export default {
	components: { pdf },
	data() {
		return {
            numPages: 1, // 当前页
            pdfUrl: "http://testimg.rundejy.com/rundeApp/myfile1650274122609.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)
		},
	}
};

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