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.csdn.net/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开发微信小程序，7步轻松搞定，你也能成为跨平台大神
java专栏
11-14 1239
uni-app是由DCloud推出的一款基于Vue.js的跨平台开发框架。它支持一次编写多端运行，包括iOS、Android、H5以及各种小程序平台。这意味着你只需要编写一套代码，就可以发布到多个平台，大大提高了开发效率。uni-app支持自定义组件，你可以通过标签中的导出组件。在components目录下，创建一个新的组件文件夹，并添加一个.vue文件。在页面中使用自定义组件，需要先在页面的.vue文件中引入组件。
uniapp + 安卓APP + H5 + 微信小程序实现PDF文件的预览和下载
m0_46487331的博客
08-13 1813
uniapp + 安卓APP + H5 + 微信小程序实现PDF文件的预览和下载
微信小程序文件存储和获取的详细方案
爱分享的程序员
03-06 981
在微信小程序中，要根据索引（如自定义标识符）检查是否存在对应的文件，可以通过以下方案实现。这里假设你已通过某种方式将文件路径与索引关联存储（例如使用本地缓存 Storage），以下是完整流程：
uniapp 微信小程序文件下载
zmyalh的博客
02-18 1365
【代码】uniapp 微信小程序文件下载。
使用uniapp开发微信小程序-文件下载并打开
Yu_Jian_Qt的博客
12-25 1094
小程序下载文件，有两种情况，一种是文件在服务器上，一种是请求后台接口，接口返回文件流在进行下载。
uniapp微信小程序下载文件到本地
weixin_56718657的博客
07-26 2279
console.error('打开文档失败', openRes);console.log('打开文档成功', openRes);"desc": "你的文件将保存到本地""desc": "你的文件将从本地读取"打开预览右上角显示菜单，直接保存到手机，打开文件管理最近。manifest.json添加。
uni-app实现下载并且可以预览PDF分享到微信好友
weixin_45557439的博客
05-08 801
【代码】uni-app实现下载并且可以预览PDF分享到微信好友。
uniapp下载文件保存到手机本地
热门推荐
fbqgdxw的博客
04-20 2万+
最近接到一个项目需求，下载各种格式文件保存到手机本地 遇到的问题如下： 1、iphone手机无法保存到文件中 2、Android手机文件保存的位置不易查找 3、Android手机文件存储名称非文件原名，而是以时间戳命名 不可抗因素： 1、iphone自带的文件管理功能不能自动扫描各个APP下载的文件，需要手动保存一次才可以在文件管理器中找到 2、小程序对下载文件不友好，图片、视频可以正常下载到相册。其他格式文件Android手机只能下载其规定的文件夹中，iphone手机下载后无法无法保存 .
uniapp 微信小程序图片下载保存功能
最新发布
Binglianxiaojiao的博客
03-22 792
在开发这个功能之前，要先确保小程序的隐私条约是否加上相册（仅写入）权限，设置路径：微信公众平台->账号设置（左下角头像悬停）->用户隐私保护指引（去完善）->相册（仅写入）权限。首先使用uni.downloadFile方法将图片进行下载，然后再使用uni.saveImageToPhotosAlbum方法对下载后的临时图片路径进行保存到本地。
【uniapp小程序】在uniapp中开发微信小程序中下载文件
一个前端开发者
08-08 1644
需要使用的api：downloadFile，previewImage，openDocument，如果是图片我们就使用previewImage预览，预览的同时也可以下载到本地，其他文件不能预览的使用openDocument打开，打开后可以保存到手机本地。
详解使用uni-app开发微信小程序之登录模块
01-20
在使用uni-app开发微信小程序的过程中，登录模块是一个关键的组成部分，因为这涉及到用户授权和数据安全。微信小程序的官方更新公告表明，对于体验版和开发版的小程序，调用`wx.getUserInfo`接口将不再自动弹出授权...
uni-app微信小程序生成海报.rar
02-07
【uni-app微信小程序生成海报】 在移动应用开发领域，uni-app是一个备受瞩目的框架，它由ECharts团队推出，旨在实现跨平台开发，支持包括微信小程序、H5、App等在内的多个平台。本教程将详细讲解如何使用uni-app来...
【uni-app】只支持在微信小程序运行的 导入外部3d模型
09-29
总之，虽然uni-app在微信小程序中导入外部3D模型存在一定的挑战，但通过合理的选择模型格式、转换工具和利用微信小程序的API，依然可以实现丰富的3D视觉效果。开发者需要不断学习和实践，以掌握这一技术，提升应用的...
uniapp小程序实现线上文件保存到本地或者预览打开
qq_51588002的博客
12-17 302
【代码】uniapp小程序实现线上文件保存到本地或者预览打开。
【uni-app】微信小程序下载预览文件并监听下载进度
weixin_51054408的博客
10-30 617
【uni-app】微信小程序下载预览文件并监听下载进度
uniApp、微信小程序下载预览文件、图片
小刘
01-03 1010
此方法只能预览 doc, xls, ppt, pdf, docx, xlsx, pptx。
【uni-app】【微信小程序】文件下载、保存并查看
qq_42940355的博客
12-05 530
【代码】【uni-app】【微信小程序】文件下载、保存并查看。
uniapp移动端文件下载，并保存到手机本地存储空间
x910380566的博客
10-24 4629
说实话这个我花了好久的时间去研究，找各种资料。实属不易特此记录其实还有许多需要完善的：比如，下载进度条啊等等，我看官方还有许多API，后续我直接在这继续更吧，有时间的话！一个坑就是：有些API在不同的运行场景有些API不支持，比如H5就不支持uni.saveFile还有其他的，根据官方文档提示，用了uni.getSystemManagerInfo等都直接报错了还有就是比较重要的一点，uniapp可以设置文件的位置，比如内部，外部，沙盒内以及访问权限不一样。这里我用的是容易找到文件的方式。
uniapp微信小程序保存图片到本地
08-03
### 回答1： 可以使用 uni.saveImageToPhotosAlbum 接口将图片保存到微信小程序的本地相册中。 首先，需要在小程序的 app.json 中添加如下权限： ``` "permission": { "scope.writePhotosAlbum": { "desc": "保存图片到相册需要使用" } } ``` 然后，在需要保存图片的页面或组件中，可以调用 uni.saveImageToPhotosAlbum 接口，如下所示： ``` uni.saveImageToPhotosAlbum({ filePath: '图片文件路径', success: function () { console.log('保存图片到本地相册成功'); }, fail: function () { console.log('保存图片到本地相册失败'); } }); ``` 注意： - filePath 参数为图片文件的本地路径。 - uni.saveImageToPhotosAlbum 接口需要用户授权，如果用户拒绝授权，则无法保存图片到本地相册。 在用户授权后，就可以将图片保存到微信小程序的本地相册中了。 ### 回答2： 在uniapp中，可以使用uni.request和uni.downloadFile这两个api来保存微信小程序中的图片到本地。 首先，我们需要将图片保存到服务器上，可以通过uni.request来完成。将图片的url传递给uni.request，并设置responseType为arraybuffer。示例代码如下： uni.request({ url: '图片url', responseType: 'arraybuffer', success: res => { // res.data即为图片的二进制数据 // 接下来将图片保存到本地 } }) 接着，我们可以通过uni.downloadFile api来将图片保存到本地。将res.data作为参数传递给uni.downloadFile的url参数，并设置保存路径filePath。示例代码如下： uni.downloadFile({ url: 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data), success: res => { if (res.statusCode === 200) { // res.tempFilePath为图片保存到本地的临时文件路径 console.log(res.tempFilePath) } } }) 最后，我们可以将保存到本地的临时文件移动到用户的相册中，使用uni.saveImageToPhotosAlbum来完成。示例代码如下： uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: res => { console.log('保存成功') }, fail: err => { console.log('保存失败') } }) 以上就是使用uniapp微信小程序保存图片到本地的简单步骤。需要注意的是，uniapp也提供了其他的api和方法来实现保存图片的功能，可以根据具体需求选择适合的方法。 ### 回答3： uniapp是一种跨平台开发框架，可以同时开发多个平台的应用程序，包括微信小程序。在uniapp中，我们可以使用uni-app插件来实现将图片保存到本地的功能。 具体步骤如下： 1. 首先，我们需要在uniapp项目中引入uni-app插件，可以通过在项目的根目录下的`uni.xml`文件中的`easycom`节点中添加`"@dcloudio/uni-save-image"`来引入插件。 2. 在需要保存图片的页面中，使用`uni.saveImageToPhotosAlbum()`方法来保存图片到本地相册。该方法需要传入一个对象参数，其中包含要保存的图片路径`filePath`和一个回调函数`success`用来处理保存成功的情况，和一个`fail`函数用来处理保存失败的情况。 3. 在回调函数中，我们可以通过判断返回值中的`errMsg`属性来判断保存是否成功，如果成功则显示保存成功的提示，否则显示保存失败的提示。 下面是一个示例代码： ``` <template> <view> <image src="/static/image.png"></image> <button @click="saveImage">保存图片</button> </view> </template> <script> export default { methods: { saveImage() { uni.saveImageToPhotosAlbum({ filePath: '/static/image.png', success(res) { uni.showToast({ title: '保存成功', icon: 'success' }); }, fail(res) { uni.showToast({ title: '保存失败', icon: 'none' }); } }); } } } </script> ``` 以上就是在uniapp微信小程序中保存图片到本地的简单步骤和示例代码。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值