uniapp 微信小程序根据后端返回的文件链接打开并保存到手机文件夹中【支持doc、docx、txt、xlsx等类型的文件】

项目场景:

我们在使用uniapp官方提供的uni.downloadFile以及uni.saveFile时,会发现这个文件下载的默认保存位置和我们预想的不太一样,容易找不到,而且没有提示,那么我们就需要把文件打开自己保存并且有提示保存到哪个文件夹里这样方便我们查找


解决方案:

uniapp下载文件

用到了uniapp的两个api,不用uni.saveFile的自动保存方法,用uni.openDocument然后让用户自己点击右上角三个点自己保存方便用户后续查找

cpp 复制代码
uni.downloadFile // 下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径。
uni.openDocument // 新开页面打开文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx。

方法:

cpp 复制代码
// 下载文件
			oneClickDownload(url) {
				// 下载文件资源到本地
				uni.downloadFile({
					url: url, // 后端返回的线上文件路径
					success: function(res) {
						if (res.statusCode === 200) {
							//打开文档查看
							uni.openDocument({
								filePath: res.tempFilePath,
								//关键的一步,showMenu为true才会有文件右上角的三个点下载保存按钮,不写的话只能查看不能保存
								showMenu: true,
								success: function(ress) {
									console.log("成功打开文件")
								},
								fail() {
									console.log("打开文件失败")
								}
							})
						}
					}
				});
			},

使用的话直接 res.Data换成后端给的文件地址链接即可,直接调用就直接打开了文件

cpp 复制代码
this.oneClickDownload(res.Data)  

手机上运行截图:

相关推荐
程序员Sunday2 小时前
JavaScript 事件循环面试题,宏任务与微任务怎么执行|Sunday面试指南
开发语言·javascript·面试·校招·事件循环·程序员sunday
Setsuna_F_Seiei3 小时前
前端转型 Agent 开发 06 之 Agent Memory 记忆系统(让 Agent 更智能,更懂你)
前端·agent·ai编程
zhangzeyuaaa3 小时前
Ruby 多线程、GVL(GIL)与 Mutex 完全指南
开发语言·前端·ruby
默_笙4 小时前
🌊 向量库和 ES 都查不出"关系",我只好给奶茶建了一张人脉网
前端·javascript
优选资讯4 小时前
标签打印软件怎么对接 Excel 数据
前端·excel
思无邪665 小时前
用 AI 做 JS 逆向:从抓包到复现的完整方法论
开发语言·javascript·人工智能
一个风轻云淡5 小时前
GCC 和 GDB命令简单解读
java·linux·前端
u0111026756 小时前
图片处理接口如何统一错误信息 前端提示与后端错误码设计
前端·状态模式
福兮说6 小时前
浏览器里把 iPhone 的 HEIC 转成 JPG:Chrome 解不开、转完大了七成、拍摄时间全丢,六个坑实测
前端·javascript·图像处理·chrome·ios·iphone·heic
libokaifa6 小时前
把语音模型塞进手机:sherpa-onnx 在 Android 上的 ASR / TTS
前端