- 使用依賴：vue-pdf
- 實(shí)現(xiàn)需求：將 PDF url 地址 轉(zhuǎn)換為本地頁面預(yù)覽
<template>
<div class="pdf-preview">
<NavBar />
<div class="container">
<VuePdf v-for="i in numPages" :key="i" class="pdf" :src="src" :page="i"></VuePdf>
</div>
</div>
</template>
<script>
import { Toast } from 'vant'
export default {
name: 'PdfPreview',
components: {
VuePdf: () => import(/* webpackChunkName: "vue-pdf-component" */ 'vue-pdf'),
},
props: {},
data() {
return {
pdfUrl: '', // pdf在線地址
numPages: '', // 頁數(shù)
src: '',
}
},
created() {
this.pdfUrl = this.$route.query.pdfUrl
this.loadingPDF(this.pdfUrl)
},
methods: {
// 具體用法參考：https://github.com/FranckFreiburger/vue-pdf#readme
async loadingPDF(url) {
if (!url) return
try {
const { default: pdf } = await import(/* webpackChunkName: "vue-pdf-method" */ 'vue-pdf')
this.src = pdf.createLoadingTask(url)
this.src.promise
.then(pdf => {
this.numPages = pdf.numPages
})
.catch(error => Toast(error.message))
} catch (error) {
console.info(error)
}
},
},
}
</script>
<style lang="scss" scoped>
.pdf-preview {
width: 100%;
height: 100%;
.container {
width: 100%;
height: calc(100% - #{$vue-container-top-height});
background: #f5f5f5;
position: relative;
overflow-y: scroll;
.pdf {
width: 100%;
&:not(:last-child) {
margin-bottom: 10px;
}
}
}
}
</style>
文章來源地址http://www.zghlxwxcb.cn/news/detail-739864.html
文章來源：http://www.zghlxwxcb.cn/news/detail-739864.html
到了這里，關(guān)于『VUE H5頁面 - PDF預(yù)覽』的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
