vue-pdf實(shí)現(xiàn)文件在線預(yù)覽
本文實(shí)例為大家分享了vue-pdf實(shí)現(xiàn)文件在線預(yù)覽的具體代碼,供大家參考,具體內(nèi)容如下
提示:記錄一下vue-pdf使用方法,避免忘記,便于后面使用
前言
提示:以下是本篇文章正文內(nèi)容,下面案例可供參考
一、安裝
npm install --save vue-pdf
二、pdf 頁(yè)面顯示
1.html
<template> <div class="pdf-box"> //pdf展示 <pdf class="pdf" :page="pageNum" :src="pdfForm.url" @progress="loadedRatio = $event" @num-pages="pageTotalNum = $event" ></pdf> //頁(yè)碼切換 <div class="page-box"> <el-button-group> <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage" >上一頁(yè)</el-button > <el-button type="primary" size="mini" @click="nextPage" >下一頁(yè)<i class="el-icon-arrow-right el-icon--right"></i ></el-button> </el-button-group> //頁(yè)碼展示 <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, // 總頁(yè)數(shù) loadedRatio: 0 // 當(dāng)前頁(yè)面的加載進(jìn)度,范圍是0-1 ,等于1的時(shí)候代表當(dāng)前頁(yè)已經(jīng)完全加載完成了 }, method:{ // 上一頁(yè) prePage () { let page = this.pageNum page = page > 1 ? page - 1 : this.pageTotalNum this.pageNum = page }, // 下一頁(yè) nextPage () { let page = this.pageNum page = page < this.pageTotalNum ? page + 1 : 1 this.pageNum = page }, } } </script>
效果圖
總結(jié)
記錄一下vue-pdf使用方法,避免忘記,便于后面有機(jī)會(huì)使用
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件
本篇文章主要介紹了vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例
這篇文章主要介紹了動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01詳解element上傳組件before-remove鉤子問題解決
這篇文章主要介紹了詳解element上傳組件before-remove鉤子問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04如何在Vue3中實(shí)現(xiàn)文件上傳功能結(jié)合后端API
文件上傳的功能實(shí)現(xiàn)是我們做Web應(yīng)用時(shí)候最為常見的應(yīng)用場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實(shí)現(xiàn)文件上傳功能結(jié)合后端API的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09vue和uniapp頁(yè)面實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部
這篇文章主要介紹了vue和uniapp頁(yè)面實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05vue中eslint導(dǎo)致的報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue中eslint導(dǎo)致的報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue組件設(shè)計(jì)之多列表拖拽交換排序功能實(shí)現(xiàn)
這篇文章主要介紹了Vue組件設(shè)計(jì)之多列表拖拽交換排序,常見的場(chǎng)景有單列表拖拽排序,多列表拖拽交換排序,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05Vue封裝一個(gè)Tabbar組件?帶組件路由跳轉(zhuǎn)方式
這篇文章主要介紹了Vue封裝一個(gè)Tabbar組件?帶組件路由跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04