uniapp-h5 ファイルのコピー リンク、プレビュー、ダウンロード、その他の機能

1. リンクをコピーする

メイン関数コード: document.execCommand('Copy');

		copy() {
			console.log('复制');
			var inputTest = document.createElement('input');
			inputTest.value = this.copyUrl;
			// inputTest.value='11111111111';
			document.body.appendChild(inputTest);
			inputTest.select();
			document.execCommand('Copy');
			uni.showToast({
				title: '复制成功',
				icon: 'none'
			});
		},

2. ファイルのプレビュー

要件: ポップアップ ボックスに表示する必要があるため、ui コンポーネントにネストできる必要があり、新しいページにジャンプせずにこのページで開く必要があります。

したがって、使用されるiframeタグは

<u-popup :show="show_three" :round="10" :zIndex="zIndex_three" style='padding: 40rpx;' @close="close_three" >
			<view class="popup_three" >
				<view class="title">文件预览</view>
				<iframe :src="copyUrl" width='100%' height='400rpx'></iframe></view>
		</u-popup>

最初に使用した Web ビュー

ただし、他の ui コンポーネントにネストできないため、要件を満たしません。

<template v-if='show_three'>
							<view class="" style="padding: 20rpx;">
								<web-view :src="copyUrl" ></web-view>
							</view>
					  	</template> 

3. ファイルのダウンロード