vue怎么实现在线预览pdf文件

本篇内容主要讲解“vue怎么实现在线预览pdf文件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么实现在线预览pdf文件”吧!

一、安装

npm install --save vue-pdf

二、pdf 页面显示

1.html

<template>  <div class="pdf-box">  //pdf展示         <pdf           class="pdf"           :page="pageNum"           :src="pdfForm.url"           @progress="loadedRatio = $event"           @num-pages="pageTotalNum = $event"         ></pdf>         //页码切换         <div class="page-box">           <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 >             {{ pageNum }} / {{ pageTotalNum }}           </div>         </div>       </div> </template>

2.javascript

<script> import pdf from 'vue-pdf' export default {   name: 'pdf',   components: { pdf },   data () {    pdfForm: { url: '' },       // 查看pdf       url:'',       pageNum: 1,       pageTotalNum: 1, // 总页数       loadedRatio: 0 // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了   },   method:{  // 上一页     prePage () {       let page = this.pageNum       page = page > 1 ? page - 1 : this.pageTotalNum       this.pageNum = page     },     // 下一页     nextPage () {       let page = this.pageNum       page = page < this.pageTotalNum ? page + 1 : 1       this.pageNum = page     },   }  } </script>

效果图

到此，相信大家对“vue怎么实现在线预览pdf文件”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！