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: '失败请重新下载',});},});},

uniapp下载文件例（Word）以及下载其他文件，Word文件的转发，保存，查看相关推荐

fastdfs+nginx+keepalived+openoffice+lua 实现文件上传、下载、水印、预览（word、excel、ppt、txt），feign文件上传
前言最近刚刚实现的文件服务中心,记录一下,为没做过的人提供一下思路,由于本人技术有限,不足之处欢迎批评指正,共同学习,共同进步. 目录 Fastdfs集群搭建搭建keepalived 实现ngxi ...
【Word】下载的word文档(doc格式)编辑后出现(同文件名.files)的文件夹--解决办法
文章目录 1. 此处为标题所述情况,解决办法见下一标题 2. 解决办法--如何确保修改文件后,不出现[原文件--更改.files]的文件夹 1. 此处为标题所述情况,解决办法见下一标题如图1-创建原 ...
Java多word文件生成后进行压缩并导出下载后，压缩文件损坏并提示“不可预料的压缩文件末端”和“CRC校验失败”
Java多word文件生成后进行压缩并导出下载后,压缩文件损坏并提示"不可预料的压缩文件末端"和"CRC校验失败" WinRAR 打开情况: 提示不可预料的压缩 ...
java实现word下载及打包成zip下载(单个文件、多个文件)
最近,本人需求将实现word下载以及打包成zip进行下载(单个文件.多个文件)将最近自己学习到的知识点分享给大家 1.实现word模板(三个步骤,最终需要的是upload.ftl) 大家可以参考这篇文 ...
flask vue 文件流的方式下载word
前端传递uuid,后端根据uuid找到对应的记录,把数据填充导word文档中,以文件流的方式传递给前端实现下载功能,这样后端就不用先保存再根据路径下载了这是重点,必须加,不然下载的文件是乱码 {re ...
【uniapp】微信小程序中的视频下载和分享、PDF下载和分享、完整下载（图片、视频、各种文件）
目录一.视频的下载二.视频的分享三.PDF下载和分享四.完整五.有可能是坑一.视频的下载先使用uni.downloadFile将文件下载到将远程文件下载到小程序内存中,然后使用uni.s ...
若依 springboot 使用freemarker生成word文件，并导出下载
目录 freemarker生成word文件并导出一.环境准备二.编写代码 1.实体类 2.mapper.xml文件 3.mapper.java文件 4.Service.java 5.Service ...
java里面的文件上传与下载
java里面的文件上传与下载文件的上传与下载主要用到两种方法: 1.方法一:commons-fileupload.jar commons-io.jar apache的commons-fileuplo ...
PDF转换成Word转换器下载 PDF如何转成Word
导语:在网络上用户可以下载到许多PDF转换成Word转换器软件,但是如果经过进一步的尝试之后就会发现,并非所有的PDF转换成Word转换器都具备优秀的转换质量.普通的PDF转换工具转换出来的Word文 ...
和dump文件_SRA数据库及下载二代测序原始数据转换为fastq文件
一.SRA数据库: NCBI网站储存二代测序原始数据的数据库. (一)SRA数据类型: 1.Studies:研究课题 2.Experiments:实验设计 3.Samples:样品信息 4.Runs: ...

uniapp下载文件例（Word）以及下载其他文件，Word文件的转发，保存，查看

uniapp下载文件例（Word）以及下载其他文件，Word文件的转发，保存，查看相关推荐

最新文章

热门文章

uniapp下载文件 例（Word）以及下载其他文件，Word文件的转发，保存，查看

uniapp下载文件 例（Word）以及下载其他文件，Word文件的转发，保存，查看相关推荐

最新文章

热门文章

uniapp下载文件例（Word）以及下载其他文件，Word文件的转发，保存，查看

uniapp下载文件例（Word）以及下载其他文件，Word文件的转发，保存，查看相关推荐