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~