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>
效果圖
總結(jié)
記錄一下vue-pdf使用方法，避免忘記，便于后面有機會使用
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
自從體驗了一下vite之后,真的太快了,然而對vue3還不是很熟練,就想著在vue2的項目中使用以下vite,下面這篇文章主要給大家介紹了關于vite搭建vue2項目的相關資料,需要的朋友可以參考下2022-11-11
基于vue+h5實現(xiàn)車牌號輸入框功能(demo)
最近開發(fā)項目是學校校內(nèi)車輛超速方面的統(tǒng)計檢測方面的系統(tǒng),在開發(fā)過程中發(fā)現(xiàn)有個小功能,就是用戶移動端添加車牌號,剛開始想著輸入框,提交時正則效驗一下格式,最后感覺不方便,所以就簡單自己手寫了一個H5車牌號軟鍵盤,對vue車牌號輸入框?qū)崿F(xiàn)代碼感興趣的朋友一起看看吧2025-03-03
這篇文章主要介紹了這15個Vue指令,讓你的項目開發(fā)爽到爆，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue響應式原理，響應式就是當對象本身（對象的增刪值）或者對象屬性（重新賦值）發(fā)生了改變的時候，就會運行一些函數(shù)，最常見的示render函數(shù)2022-09-09
Vue3中defineEmits、defineProps?不用引入便直接用
這篇文章主要介紹了Vue3中defineEmits、defineProps?不用引入便直接用，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
Vue2的異步更新機制是基于JavaScript的事件循環(huán)機制實現(xiàn)的。nextTick方法則是在DOM更新后執(zhí)行回調(diào)函數(shù)。本文詳細介紹了Vue2的異步更新機制和nextTick原理，對于理解Vue2的渲染機制和優(yōu)化性能有很大的幫助。2023-04-04
vue-cli使用stimulsoft.reports.js的詳細教程
Stimulsoft?Reports.JS是一個使用JavaScript和HTML5生成報表的平臺。它擁有所有擁來設計，編輯和查看報表的必需組件。該報表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法，一起看看吧2021-12-12
這篇文章主要介紹了使用vue-cli打包過程中的步驟以及問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue中使用Lodop插件實現(xiàn)打印功能的簡單方法
這篇文章主要給大家介紹了關于Vue中使用Lodop插件實現(xiàn)打印功能的簡單方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
這篇文章主要為大家詳細介紹了Vue項目利用axios請求接口下載excel，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11