- 使用依赖：vue-pdf
- 实现需求：将 PDF url 地址 转换为本地页面预览
<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: '', // 页数
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>
文章来源地址https://www.toymoban.com/news/detail-739864.html
文章来源：https://www.toymoban.com/news/detail-739864.html
到了这里，关于『VUE H5页面 - PDF预览』的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
