欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 文化 > uniapp下载文件的方案,包括H5,App方案解决办法

uniapp下载文件的方案,包括H5,App方案解决办法

2025/11/5 19:11:51 来源:https://blog.csdn.net/Miketutu/article/details/143432430  浏览:    关键词:uniapp下载文件的方案,包括H5,App方案解决办法

1. 在uniapp需要下载文件,但是显示情况是不能下载。所以只能使用该办法来进行下载。

2. 这有一个注意点是:如果你做的是H5的方案,那么我已经替你踩好坑了,UC浏览器是不支持blob类型的下载,以及创建a标签的方案来进行下载。目前发现只有QQ浏览器支持这两种方案。如果你是保密单位,QQ浏览器其实也是可以,因为也是国产化的浏览器。

代码体现:

首先获取后端给你返回的文件下载地址:

mounted() {this.fatIdList = this.config.modelIdthis.$refs.uToast.show({type: 'warning',icon: false,title: '若UC浏览器无法下载模板,请使用QQ浏览器下载!',duration: 3000,})deliverDownloadApi(this.fatIdList, {"currentPage": 1,"pageSize": 20,"sort": "desc","sidx": "","menuId": this.fatIdList,"queryJson": "","superQueryJson": '',"idList": [],"dataType": "1","selectKey": []}).then(data => {this.fileUrl = this.define.baseURL + data.data.urlthis.download()})},

第二步:调取uniapp的原始下载方法uni.downloadFile

// 点击下载download() {setTimeout(() => {// 更多参数,详见文档// https://uniapp.dcloud.net.cn/uni-app-x/api/download-file.html#downloadfileuni.downloadFile({url: this.fileUrl, //下载地址header: this.header, //HTTP请求Headertimeout: 150000, //下载超时时间(毫秒)success: (res) => {// 利用临时地址调起下载this.arouse(res)},fail: (err) => {console.log('下载失败', err)}})}, 3000)},

第三步:

创建a标签的方法来下载:

// 利用临时地址调起下载arouse(res) {let date = new Date()let file_name = '退换货管理(标准化)' + this.dateFormat(date)// eslint-disable-next-line camelcaselet file_type = 'xlsx'// console.log(res)var oA = document.createElement("a")// 设置下载的文件名oA.download = `${file_name}.${file_type}`// Blob临时路径再保存到本地oA.href = res.tempFilePath// 插入DOM并执行点击下载document.body.appendChild(oA)oA.click()oA.remove()},

第四步:直接打开QQ浏览器开始下载 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词