vue-pdf實現(xiàn)文件在線預覽
更新時間:2021年08月20日 16:17:07 作者:Julia_0502
這篇文章主要為大家詳細介紹了vue-pdf實現(xiàn)文件在線預覽,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue-pdf實現(xiàn)文件在線預覽的具體代碼,供大家參考,具體內(nèi)容如下
提示:記錄一下vue-pdf使用方法,避免忘記,便于后面使用
前言
提示:以下是本篇文章正文內(nèi)容,下面案例可供參考
一、安裝
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 style=" color: #409EFF;display: flex;justify-content: flex-end;"> {{ 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, // 總頁數(shù) loadedRatio: 0 // 當前頁面的加載進度,范圍是0-1 ,等于1的時候代表當前頁已經(jīng)完全加載完成了 }, 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使用方法,避免忘記,便于后面有機會使用
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vuejs使用FormData實現(xiàn)ajax上傳圖片文件
本篇文章主要介紹了vuejs使用FormData實現(xiàn)ajax上傳圖片文件,具有一定的參考價值,有興趣的可以了解一下2017-08-08動態(tài)實現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例
這篇文章主要介紹了動態(tài)實現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-01-01詳解element上傳組件before-remove鉤子問題解決
這篇文章主要介紹了詳解element上傳組件before-remove鉤子問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04