vue-pdf實現檔案線上預覽
阿新 • • 發佈:2021-08-20
本文例項為大家分享了-pdf實現檔案線上預覽的具體程式碼,供大家參考,具體內容如下
提示:記錄一下vue-pdf使用方法,避免忘記,便於後面使用
前言
提示:以下是本篇文章正文內容,下面案例可供參考
一http://www.cppcns.com、安裝
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" CGesqtaDKk size="mini" @click="prehttp://www.cppcns.comPage" >上一頁</el-button > <el-button type="primary" size="mini" @click="nextPage" >下一頁<i class="el-icon-arrow-right el-icon--rwww.cppcns.comight"></i ></el-button> </el-button-group> //頁碼展示 <div style=" color: #409EFF;display: flex;justify-content: flex-end;"> {{ pageNum }} / {{ pageTotalNum }} </div> </div> </div> </template>
2.
<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使用方法,避免忘記,便於後面有機會使用
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。