vue中使用vue-pdf的方法詳解
更新時(shí)間：2020年09月05日 11:01:30 作者：Snow_GX
這篇文章主要介紹了vue中使用vue-pdf的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
需求：簡(jiǎn)單說~~有兩個(gè)pdf文件需在h5上展示，通過點(diǎn)擊按鈕切換不同文件的顯示
注：
1.vue-pdf默認(rèn)展示首頁(yè)，我這里的需求是通過滑動(dòng)展示所有頁(yè)面，這里使用的v-for遍歷。有多少頁(yè)就加載了多少個(gè)pdf組件。
2.pdf文件存在跨域問題，這個(gè)需要后端同學(xué)支持。
3.demo上的pdf文件只有一頁(yè)，測(cè)試多頁(yè)展示，自己改用多頁(yè)pdf文件即可
<template>
<div class="pdf_wrap">
<div class="pdf_list">
<!-- src:pdf地址，page: 當(dāng)前顯示頁(yè) -->
<pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="width: 100%" > </pdf>
</div>
<Button type="info" @click="loadPdf(pdfUrl1)">
文件1
</Button>
<Button type="info" native-type="submit" @click="loadPdf(pdfUrl2)">
文件2
</Button>
</div>
</template>
<script>
import pdf from 'vue-pdf'
import { Button } from 'vant'
export default {
components: {
pdf, Button
},
data () {
return {
src: '',
numPages: undefined,
pdfUrl1: 'https://clinic-trial-attachments.oss-cn-beijing.aliyuncs.com/output/demo.pdf/1.pdf',
pdfUrl2: 'https://clinic-trial-attachments.oss-cn-beijing.aliyuncs.com/output/123demo'
}
},
mounted () {
this.loadPdf(this.pdfUrl1)
},
methods: {
loadPdf (url) {
this.src = pdf.createLoadingTask(url)
this.src.promise.then(pdf => {
this.numPages = pdf.numPages // 這里拿到當(dāng)前pdf總頁(yè)數(shù)
})
}
}
}
</script>
<style scoped>
.pdf_wrap {
background: #fff;
height: 100vh
}
.pdf_list {
height: 80vh;
overflow: scroll;
}
button {
margin-bottom: 20px;
}
</style>
總結(jié)
到此這篇關(guān)于vue中使用vue-pdf的方法詳解的文章就介紹到這了,更多相關(guān)vue使用vue-pdf內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中使用計(jì)算屬性的知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理了一篇關(guān)于Vue中使用計(jì)算屬性的知識(shí)點(diǎn)總結(jié)內(nèi)容，對(duì)此有興趣的朋友們可以跟著學(xué)習(xí)參考下。2021-12-12
vue實(shí)力踩坑?當(dāng)前頁(yè)push當(dāng)前頁(yè)無效的解決
這篇文章主要介紹了vue實(shí)力踩坑?當(dāng)前頁(yè)push當(dāng)前頁(yè)無效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。這篇文章重點(diǎn)給大家介紹Vue.js的模板語法，感興趣的朋友跟隨小編一起看看吧2020-02-02
vue實(shí)現(xiàn)帶自動(dòng)吸附功能的懸浮球
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶自動(dòng)吸附功能的懸浮球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue 表單綁定與組件的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
解決VUE打包后與nginx代理出現(xiàn)加載速度超級(jí)慢的問題
這篇文章主要介紹了解決VUE打包后與nginx代理出現(xiàn)加載速度超級(jí)慢的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue+element UI實(shí)現(xiàn)樹形表格
這篇文章主要為大家詳細(xì)介紹了vue+element UI實(shí)現(xiàn)樹形表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例
今天小編就為大家分享一篇vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
使用vue-draggable-plus實(shí)現(xiàn)拖拽排序
最近遇到一個(gè)需求,在 Vue3 的一個(gè) H5 頁(yè)面當(dāng)中點(diǎn)擊拖拽圖標(biāo)上下拖動(dòng) tab 子項(xiàng),然后點(diǎn)擊保存可以保存最新的 tab 項(xiàng)順序,同事說可以用 vue-draggable-plus 這個(gè)庫(kù)來實(shí)現(xiàn)拖拽,所以本文給大家介紹了如何使用vue-draggable-plus實(shí)現(xiàn)拖拽排序,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細(xì)介紹了Vue如何獲取數(shù)據(jù)列表展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12