uni-app之微信小程序实现‘下载+保存至本地+预览’功能

已于 2024-11-10 21:50:14 修改
阅读量1.3w 收藏 40
点赞数 11
文章标签： uni-app 微信小程序 小程序
于 2023-07-27 18:13:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_50276105/article/details/131963308
版权

目录

一、H5如何实现下载功能

二、微信小程序实现下载资源功能方面与H5有很大的不同

三、 微信小程序实现文件（doc,pdf等格式，非图片）下载（下载->保存->预览）功能

四、图片预览、保存、转发、收藏：uni.previewImage()

五、 我当前遇到‘关于文件预览uni.openDocument()’API的问题，欢迎评论区讨论

一、H5如何实现下载功能

1、是的，浏览器页面实现资源下载是非常简单的：只需要在资源外包裹一层<a href="#"></a>再往里里面添加链接就完事了！

二、微信小程序实现下载资源功能方面与H5有很大的不同

1、刚开始uni-app中做下载资源功能时，单纯以为和PC端一样，放a标签就行。

然而，用微信开发者工具打包编译出来时会报错，因为，它把a标签打包编译成了navigator标签。而该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。 

2、 放a标签，运行在谷歌浏览器上，点击来接便可以下载：

3、同样的代码运行在微信开发者工具上，代码变化且报错，那是因为链接并非本地页面而是远程服务获取的图片链接。

三、 微信小程序实现文件（doc,pdf等格式

最低0.47元/天 解锁文章
三水木雨
关注
【下载文件】uniapp开发小程序，下载文件并保存到本地
weixin_48596030的博客
07-27 1万+
【下载文件】uniapp开发小程序，下载文件并保存到本地
uni-app/vue2：微信小程序实现文件流的下载及预览
最新发布
龙衣
05-23 430
文章介绍了如何通过后端返回的文件流实现文件的下载和预览。首先，通过uni.request方法请求文件流，设置responseType为arraybuffer以接收二进制数据。接着，使用uni.getFileSystemManager()将文件流写入本地，并通过uni.openDocument打开文件进行预览。此外，文章还提到当本地存储文件超过10M时，可以通过uni.getSavedFileList和uni.removeSavedFile方法清除缓存，避免存储空间不足的问题。整个过程涵盖了文件流的下载、存储
uniapp微信小程序下载文件到本地
weixin_56718657的博客
07-26 2457
console.error('打开文档失败', openRes);console.log('打开文档成功', openRes);"desc": "你的文件将保存到本地""desc": "你的文件将从本地读取"打开预览右上角显示菜单，直接保存到手机，打开文件管理最近。manifest.json添加。
uniapp（Vue）开发微信小程序 之 保存图片到本地
努力的nana
04-16 1335
srcsrc。
uniapp微信小程序下载视频或者文件增加下载进度
a1349798978 程序员博客
04-13 817
通过以上实现，我们在微信小程序中完成了具备以下特性的视频下载功能：完善的权限管理流程实时更新的下载进度提示友好的异常处理机制跨平台兼容性（H5 / 小程序）关键技术点在于利用wx.downloadFile的进度监听事件，结合uni.showLoading实现动态进度提示。这种方案既保证了用户体验，又简化了开发成本，适用于大多数需要文件下载进度反馈的场景。在实际项目中，可根据具体 UI 需求扩展自定义进度弹窗样式，进一步提升交互体验。
使用uniapp开发微信小程序-文件下载并打开
Yu_Jian_Qt的博客
12-25 1204
小程序下载文件，有两种情况，一种是文件在服务器上，一种是请求后台接口，接口返回文件流在进行下载。
uni-app实现下载并且可以预览PDF分享到微信好友
weixin_45557439的博客
05-08 840
【代码】uni-app实现下载并且可以预览PDF分享到微信好友。
uniapp下载文件保存到手机本地
热门推荐
fbqgdxw的博客
04-20 2万+
最近接到一个项目需求，下载各种格式文件保存到手机本地 遇到的问题如下： 1、iphone手机无法保存到文件中 2、Android手机文件保存的位置不易查找 3、Android手机文件存储名称非文件原名，而是以时间戳命名 不可抗因素： 1、iphone自带的文件管理功能不能自动扫描各个APP下载的文件，需要手动保存一次才可以在文件管理器中找到 2、小程序对下载文件不友好，图片、视频可以正常下载到相册。其他格式文件Android手机只能下载其规定的文件夹中，iphone手机下载后无法无法保存 .
uniapp 微信小程序图片下载保存功能
Binglianxiaojiao的博客
03-22 1079
在开发这个功能之前，要先确保小程序的隐私条约是否加上相册（仅写入）权限，设置路径：微信公众平台->账号设置（左下角头像悬停）->用户隐私保护指引（去完善）->相册（仅写入）权限。首先使用uni.downloadFile方法将图片进行下载，然后再使用uni.saveImageToPhotosAlbum方法对下载后的临时图片路径进行保存到本地。
【uniapp小程序】在uniapp中开发微信小程序中下载文件
一个前端开发者
08-08 1742
需要使用的api：downloadFile，previewImage，openDocument，如果是图片我们就使用previewImage预览，预览的同时也可以下载到本地，其他文件不能预览的使用openDocument打开，打开后可以保存到手机本地。
uniapp小程序实现线上文件保存到本地或者预览打开
qq_51588002的博客
12-17 345
【代码】uniapp小程序实现线上文件保存到本地或者预览打开。
详解使用uni-app开发微信小程序之登录模块
01-20
在使用uni-app开发微信小程序的过程中，登录模块是一个关键的组成部分，因为这涉及到用户授权和数据安全。微信小程序的官方更新公告表明，对于体验版和开发版的小程序，调用`wx.getUserInfo`接口将不再自动弹出授权...
uni-app微信小程序生成海报.rar
02-07
【uni-app微信小程序生成海报】 在移动应用开发领域，uni-app是一个备受瞩目的框架，它由ECharts团队推出，旨在实现跨平台开发，支持包括微信小程序、H5、App等在内的多个平台。本教程将详细讲解如何使用uni-app来...
【微信小程序】uni-app开发微信小程序，7步轻松搞定，你也能成为跨平台大神
java专栏
11-14 1283
uni-app是由DCloud推出的一款基于Vue.js的跨平台开发框架。它支持一次编写多端运行，包括iOS、Android、H5以及各种小程序平台。这意味着你只需要编写一套代码，就可以发布到多个平台，大大提高了开发效率。uni-app支持自定义组件，你可以通过标签中的导出组件。在components目录下，创建一个新的组件文件夹，并添加一个.vue文件。在页面中使用自定义组件，需要先在页面的.vue文件中引入组件。
【uni-app】微信小程序下载预览文件并监听下载进度
weixin_51054408的博客
10-30 648
【uni-app】微信小程序下载预览文件并监听下载进度
uniapp 微信小程序文件下载
zmyalh的博客
02-18 1431
【代码】uniapp 微信小程序文件下载。
uniApp、微信小程序下载预览文件、图片
小刘
01-03 1031
此方法只能预览 doc, xls, ppt, pdf, docx, xlsx, pptx。
【uni-app】【微信小程序】文件下载、保存并查看
qq_42940355的博客
12-05 567
【代码】【uni-app】【微信小程序】文件下载、保存并查看。
uniapp移动端文件下载，并保存到手机本地存储空间
x910380566的博客
10-24 5143
说实话这个我花了好久的时间去研究，找各种资料。实属不易特此记录其实还有许多需要完善的：比如，下载进度条啊等等，我看官方还有许多API，后续我直接在这继续更吧，有时间的话！一个坑就是：有些API在不同的运行场景有些API不支持，比如H5就不支持uni.saveFile还有其他的，根据官方文档提示，用了uni.getSystemManagerInfo等都直接报错了还有就是比较重要的一点，uniapp可以设置文件的位置，比如内部，外部，沙盒内以及访问权限不一样。这里我用的是容易找到文件的方式。
uniapp微信小程序下载图片
08-13
根据提供的代码，uniapp微信小程序下载图片的方法有多种实现方式。以下是其中几种常见的方法： 方法一： 可以使用uni.downloadFile()方法下载图片，然后使用uni.saveImageToPhotosAlbum()方法保存图片到本地相册。代码示例如下： ```javascript handledownload() { const that = this uni.downloadFile({ url: '图片地址', success: res => { if (res.statusCode === 200) { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function() { uni.showToast({ title: '保存成功', duration: 2000 }) }, fail: function() { uni.showToast({ title: '保存失败', duration: 2000 }) } }) } else { uni.showToast({ title: '保存失败', duration: 2000 }) } } }) } ``` 方法二： 可以使用uni.downloadFile()方法下载图片，然后使用uni.openDocument()方法打开文档来查看下载的图片。代码示例如下： ```javascript 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: '失败请重新下载' }); }, }); } ``` 方法三： 与方法二类似，可以使用uni.downloadFile()方法下载图片，然后使用uni.saveFile()方法将文件保存到本地，最后使用uni.openDocument()方法打开保存的图片。代码示例如下： ```javascript download(i) { uni.downloadFile({ url: this.mate[i].path, success: function(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: '失败请重新下载' }); }, }); } ``` 以上是uniapp微信小程序下载图片的几种常见实现方法。根据实际需求和代码逻辑，可以选择适合的方法进行实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [在uniapp微信小程序中保存图片到本地相册](https://blog.youkuaiyun.com/jayusmazyyolk/article/details/126532923)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uniapp下载文件 例（Word）以及下载其他文件，Word文件的转发，保存，查看](https://blog.youkuaiyun.com/weixin_56718509/article/details/124615998)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值