zyejMAll-mobile/pages/user/invoices/invoicePreviews.vue

<template>
	<s-layout title="发票预览" class="invoice_preview">
		<view class="invoicePreview_box">
			<!-- <view class="downloadBtn" @click.stop="handleDownload()">下载</view> -->
			<!-- <web-view :src="showUrl" :fullscreen="false"></web-view> -->

			<view class="sameBtn wenj" @click="lookfile" >
						点击预览发票
				</view>
				
				<view class="sameBtn goDownloadbtn" @tap.stop="copyTodownload">复制pdf地址去浏览器下载</view>
		</view>

	</s-layout>
</template>

<script setup>
	import {
		ref,
		onUnmounted
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	let timerId = null;
	let showUrl = ref('')
	onLoad((options) => {
		showUrl.value = options.invoiceUrl || 'https://xcx.dfhg888.cn/admin-api/infra/file/29/get/pp1.pdf'
		// downloadFile()
		// handleDownload()
		// checkAndDownloadFile(showUrl.value);
		
		// lookfile();
		
		// timerId = setTimeout(() => {
		//     copyTodownload();
		//   }, 3000);
	})
	
	// onUnload(()=>{
	// 	if (timerId) {
	// 	    clearTimeout(timerId);
	// 	    timerId = null;
	// 	  }
	// })
	const lookfile=()=>{
				uni.showToast({
				    title: '加载中',
				    duration: 5000,
					icon:"loading"
				});
				uni.downloadFile({
				  url: showUrl.value, //文件名
				  success: function (res) {
				    var pdffilePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: pdffilePath,
					  showMenu: true,
				      success: function (res) {
				        console.log('打开文档成功');
						uni.hideToast();
				      }
				    });
				  }
				});
			}
			
	const copyTodownload = () => {
		uni.showModal({
			title: '复制下载',
			content: `是否复制地址去浏览器下载？`,
			success: function(modalRes) {
				if (modalRes.confirm) {
					// 用户确认后开始下载
					// downloadFile(fileUrl);
					uni.setClipboardData({
						data: showUrl.value,
						success: function() {
							console.log('success');
						}
					})

				} else if (modalRes.cancel) {
					console.log('用户取消复制');
				}
			}
		});
	}

	const handleDownload = () => {
		// 调用函数，传入文件URL
		console.log("点击了")
		// checkAndDownloadFile(showUrl.value);
		uni.downloadFile({
			url: showUrl.value, // 下载文件的URL地址
			success: function(res) {
				if (res.statusCode === 200) {
					// 下载成功，res.tempFilePath为临时文件路径
					console.log('下载成功，临时文件路径为：', res.tempFilePath);

					// 接下来可以使用uni.saveFile保存到本地
					uni.saveFile({
						tempFilePath: res.tempFilePath, // 刚才下载得到的临时文件路径
						success: function(saveRes) {

							console.log('文件已保存到本地，路径为：', saveRes.savedFilePath);
							sheep.$helper.toast('保存成功!');
						}
					});
				}
			}
		});
	}

</script>

<style lang="scss" scoped>
	.invoicePreview_box {
		width: 100%;
		.sameBtn{
			width: 75%;
			height: 100rpx;
			border: 1rpx solid #D2D1D1;
			margin: 80rpx auto ;
			text-align: center;
			line-height: 100rpx;
			font-weight: bold;
			color: #7d9337;
			border-radius: 100rpx;
			font-size: 30rpx;
		}
	}

	.downloadBtn {
		// position: absolute;
		// top: 80vh;
		width: 300rpx;
		color: #7d9337;
		line-height: 41px;
		// left: 50%;
		// transform: translate(-50%, -50%);
		border: 1rpx solid #7d9337;
		height: 80rpx;
		border-radius: 100rpx;
		text-align: center;
		font-size: 36rpx;
		cursor: pointer;
	}
</style>