uniapp下载文件 例(Word)以及下载其他文件,Word文件的转发,保存,查看

 直接复制用就可以,建议直接复制 JS 部分然后修改了我写的URL即可

 html部分

<view class="filecen" v-for="(item,index) in mate" :key="index">//循环我的数据
	<view class="filecen_data">
		<u-icon size="50" name="file-text"></u-icon>          //这里是图标
		<view class="filecen_data_cen">{{item.name}}</view>   //文件名称
		<view class="" @click="download(index)">      //点击触发的事件,带了index,判断第几个
			<u-icon size="50" name="download"></u-icon>       //下载图标
		</view>
	</view>
</view>
<!-- 这里图标酌情的修改一下  我这里用的uView这个插件  然后循环的数据需要你们获取 -->

JS部分 ----------------------> 其实只复制这部分就够了,改一下url地址就可以了 

download(i) {//这个i是上面带的索引位
    console.log(i,'下载')		
	uni.downloadFile({
		url: this.mate[i].path,//下载地址,后端接口获取的链接
			success: (data) => {
				if (data.statusCode === 200) {
					uni.saveFile({//文件保存到本地
					    tempFilePath: data.tempFilePath, //临时路径
						success: function(res) {
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '文件已保存:' + res.savedFilePath, //保存路径
								duration: 3000,
							});
							setTimeout(() => { //可要可不要 这里测试一下是否下载成功
								//打开文档查看
								uni.openDocument({
									filePath: res.savedFilePath,
									success: function(res) {
									    console.log('打开文档成功');
									}
								});
							}, 2000)
						}
					});
				}
			},
			fail: (err) => {
				console.log(err);
				uni.showToast({
					icon: 'none',
					mask: true,
					title: '失败请重新下载',
				});
			},
		});
	},

 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;
		}
	}
		

注意=========================================真机浏览效果如最后一张图片

这段代码可以实现 查看,分享,保存,  会在右上角有三个点点

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('打开文档成功');
							}
						});
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},

 

  • 6
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值