uniProject/pages/demo/richDemo.vue

<template>
	<view >
		<view class="pdf-container">
			  <web-view 
			        v-if="pdfUrl" 
			        :src="pdfUrl" 
			        class="web-view"
			      ></web-view>
		</view>
		<view>
			<mp-html :content="content" />
		</view>
	</view>
</template>
<script setup>
	import {
		toast
	} from "@/utils/common";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		zhaoshengZhaopinInfo
	} from '@/api/login.js'
	import cacheManager from '@/utils/cacheManager.js'
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import {
		ref
	} from 'vue';
	const content = ref('')
	const pdfUrl = ref('')
	onLoad(() => {
		getZhaopinInfo()
	})

	function getZhaopinInfo() {
		zhaoshengZhaopinInfo({}).then(res => {
			console.log('res', res);
			content.value = res.data.content
			
			pdfUrl.value = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${encodeURIComponent(res.data.pdfUrl)}`
		//	pdfUrl.value = res.data.pdfUrl

		})
	}
</script>
<style lang="scss">
	.lli-demo-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding-bottom: 60rpx;
		box-sizing: border-box;

		.demo-scroll-view {
			overflow-y: auto;
			flex: 1;
		}

		.content-view {
			padding: 24px;
			box-sizing: border-box;
		}

		.demo-title {
			margin: 24px 0 10px;
		}
	}
	.pdf-container {
	    width: 100%;
	    height: 500px; // 固定高度
	    position: relative;
	    overflow: hidden;
	    border: 1px solid #eee;
	    margin-top: 20px;
	    
	    .web-view {
	      width: 100%;
	      height: 100%;
	      display: block;
	    }
	  }
</style>