uniProject/components/MtaPDF.vue

<template>
	<view class="pdf-container" v-if="pdfUrl">
		<button @click="handleOpen">PDF预览</button>
	</view>
	<uni-popup class="dljt-pdf-popup" ref="popup" type="bottom" background-color="#fff" :mask-click="false" :animation="false">
		<view class="pdf-popup-box">
			<uni-nav-bar class="pdf-return-btn" shadow left-icon="left" title="PDF预览" @clickLeft="handleBack" />
			<web-view class="dljt-pdf-view" :src="pdfUrl1" v-if="showPdfUrl" ></web-view>
		</view>
	</uni-popup>

</template>

<script setup>
	import {
		nextTick,
		ref
	} from "vue"
	const props = defineProps({
		pdfUrl: {
			type: String
		}
	})
	const showPdfUrl = ref(false)
	let pdfUrl1 = '';
	const popup = ref(null)

	function handleOpen() {
		popup.value.open('bottom')
		pdfUrl1 = `/hybrid/html/web/viewer.html?file=${encodeURIComponent(props.pdfUrl)}`;
		setTimeout(() => {
			showPdfUrl.value = true;
		}, 50)
	}

	function handleBack() {
		popup.value.close()
		showPdfUrl.value = false;
	}
</script>

<style lang="scss">
	.pdf-container {
		width: 100%;
		height: 200px; // 固定高度
		position: relative;
		overflow: hidden;
		border: 1px solid #eee;
		margin-top: 20px;
	}
</style>