learning-system-mobile/components/pdf-preview/pdf-preview.vue

<template>
	<view class="pdf-perView">
		<web-view :src="pdfUrl" v-if="show"></web-view>
		<div v-else class="loading">加载中...</div>
	</view>
</template>

<script>
	export default {
		props: {
			src: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				pdfUrl: '',
				show:false
			}
		},
		mounted() {
			this.loadPdf();
		},
		watch:{
			src(newVal){
				this.loadPdf();
			}
		},
		methods:{
			loadPdf(){
				let links = "";
				if(this.src){	
					links = decodeURIComponent(this.src);				
					// 设置连接地址；
					this.pdfUrl = `/hybrid/html/pdfjs/web/viewer.htm?file=${links}`;
					this.show = true;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.pdf-perView {
		.loading {
			text-align: center;
		}
	}
</style>