?直接復(fù)制用就可以，建議直接復(fù)制 JS 部分然后修改了我寫(xiě)的URL即可

?html部分

<view class="filecen" v-for="(item,index) in mate" :key="index">//循環(huán)我的數(shù)據(jù)
	<view class="filecen_data">
		<u-icon size="50" name="file-text"></u-icon>          //這里是圖標(biāo)
		<view class="filecen_data_cen">{{item.name}}</view>   //文件名稱
		<view class="" @click="download(index)">      //點(diǎn)擊觸發(fā)的事件，帶了index，判斷第幾個(gè)
			<u-icon size="50" name="download"></u-icon>       //下載圖標(biāo)
		</view>
	</view>
</view>
<!-- 這里圖標(biāo)酌情的修改一下  我這里用的uView這個(gè)插件  然后循環(huán)的數(shù)據(jù)需要你們獲取 -->

JS部分 ----------------------> 其實(shí)只復(fù)制這部分就夠了，改一下url地址就可以了?

download(i) {//這個(gè)i是上面帶的索引位
    console.log(i,'下載')		
	uni.downloadFile({
		url: this.mate[i].path,//下載地址，后端接口獲取的鏈接
			success: (data) => {
				if (data.statusCode === 200) {
					uni.saveFile({//文件保存到本地
					    tempFilePath: data.tempFilePath, //臨時(shí)路徑
						success: function(res) {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '文件已保存：' + res.savedFilePath, //保存路徑
								duration: 3000,
							});
							setTimeout(() => { //可要可不要 這里測(cè)試一下是否下載成功
								//打開(kāi)文檔查看
								uni.openDocument({
									filePath: res.savedFilePath,
									success: function(res) {
									    console.log('打開(kāi)文檔成功');
									}
								});
							}, 2000)
						}
					});
				}
			},
			fail: (err) => {
				console.log(err);
				uni.showToast({
					icon: 'none',
					mask: true,
					title: '失敗請(qǐng)重新下載',
				});
			},
		});
	},

?CSS樣式

	.filecen_data{
		width: 100%;
		padding: 20rpx 20rpx;
		display: flex;
		align-items: center;
		height: 90rpx;
		.filecen_data_cen{
			margin-left: 20rpx ;
			flex: 1;
		}
	}

	.filecen{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.file{
			width: 140rpx;
			height: 140rpx;
			text-align: center;
			line-height: 140rpx;
			border: 1rpx solid #CCCCCC;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
		

注意=========================================真機(jī)瀏覽效果如最后一張圖片

這段代碼可以實(shí)現(xiàn) 查看，分享，保存，? 會(huì)在右上角有三個(gè)點(diǎn)點(diǎn)

download(i) {
				uni.downloadFile({
					url: this.mate[i].path,//后端給的地址
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打開(kāi)文檔成功');
							}
						});
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失敗請(qǐng)重新下載',
						});
					},
				});
			},

?

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-504940.html

到了這里，關(guān)于uniapp下載文件 例（Word）以及下載其他文件，Word文件的轉(zhuǎn)發(fā)，保存，查看的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！