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"><pdfref="pdf":src="pdfUrl" ></pdf></div>
4、发现问题，只能显示一页,显示所有页面
<div class="content"><pdfref="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"><pdfref="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://....xx.pdf", //pageRotate: 0, // 旋转的角度loadedRatio: 0, // 加载进度curnumPages: 0, // 加载时的回调当前页pageTotalNum: 1, // 总的页数};},methods: {prePage() {// 上一页var page = this.numPagespage = page > 1 ? page - 1 : this.pageTotalNumthis.numPages = page},nextPage() {//下一页let page = this.numPagespage = page < this.pageTotalNum ? page + 1 : 1this.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~
