uniProject/pages/admin/Hetong/components/pdfPreview.vue

<template>
	<view>
		<uni-popup ref="popupRef" background-color="#fff" :animation="true" :is-mask-click="false" :mask-click="false">
			<view class="icon-title-navBar-box">
				<view @click="goUpPage" class="nav-bar-icon"></view>
				<text class="nav-bar-title">合同预览</text>
			</view>
			<view class="pdf-box" style="height: calc(100vh - 60px);overflow-y: auto;">
				<img v-for="item in imgList" mode="aspectFit" style="height: auto;width: 100%" :src="`data:image/png;base64,${item}`"
					@click="previewBase64Image(`data:image/png;base64,${item}`)" class="pdf-img" />
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		base64ToPath
	} from "image-tools";
	import {
		ref
	} from "vue";
	const imgList = ref([])
	const popupRef = ref(null);

	function showPDF(list) {
		popupRef.value.open('bottom');
		imgList.value = list;
	}

	function goUpPage() {
		popupRef.value.close()
	}

	async function previewBase64Image(base64Data) {
		try {
			// 关键步骤：将 Base64 字符串转换为本地临时路径
			// 此处以使用 image-tools 的 base64ToPath 为例
			const localPath = await base64ToPath(base64Data);
			// 调用 UniApp 的图片预览 API
			uni.previewImage({
				urls: [localPath], // 注意：urls 参数需要是数组，即使只预览一张图
				current: 0, // 当前显示图片在 urls 数组中的索引
			});
		} catch (error) {
			// 如果出现错误（如转换失败），隐藏加载提示并告知用户
			console.error('预览失败:', error);
			uni.showToast({
				title: '预览失败',
				icon: 'none'
			});
		}
	}

	defineExpose({
		showPDF
	})
</script>

<style>
</style>