鸿蒙5.0开发进阶：ArkTS组件-SaveButton

最新推荐文章于 2025-06-12 15:52:00 发布
最新推荐文章于 2025-06-12 15:52:00 发布
阅读量815 收藏 19
点赞数 21
分类专栏： 鸿蒙开发 ArkTS ArkUI 文章标签： harmonyos 华为 android 鸿蒙系统 ArkUI ArkTS 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Androidbye/article/details/145635357
版权

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

SaveButton

安全控件的保存控件，用户通过点击该保存按钮，可以临时获取存储权限，而不需要权限弹框授权确认。

说明

该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

不支持。

接口

SaveButton

SaveButton()

默认创建带有图标、文本、背景的保存按钮。

为避免控件样式不合法导致授权失败，请开发者先了解安全控件样式的约束与限制。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

SaveButton

SaveButton(options:SaveButtonOptions)

创建包含指定元素的保存按钮。

为避免控件样式不合法导致授权失败，请开发者先了解安全控件样式的约束与限制。

最低0.47元/天 解锁文章
鸿蒙OpenHarmony【SaveButton】安全
hhhhhh2323的博客
11-22 826
安全控件的保存控件，用户通过点击该保存按钮，可以临时获取存储权限，而不需要权限弹框授权确认。
【鸿蒙NEXT】SaveButton保存图片
my blog
10-18 503
【代码】【鸿蒙NEXT】SaveButton保存图片。
HarmonyOS(52) 使用安全控件SaveButton保存图片
菜鸟博客
08-30 2115
SaveButton 安全控件说明
鸿蒙开发Ability Kit（程序访问控制）：【使用保存控件】
鸿蒙的技术博客
07-03 919
保存控件是一种特殊的安全控件，它允许用户通过点击按钮临时获取存储权限，而无需通过权限弹框进行授权确认。集成保存控件后，当用户点击该控件时，应用会获得10秒内单次访问媒体库特权接口的授权。这适用于任何需要将文件保存到媒体库的应用场景，例如保存图片或视频等。与需要触发系统应用并由用户选择具体保存路径的Picker不同，保存控件可以直接保存到指定的媒体库路径，使得操作更为便捷。保存控件效果如图所示。
鸿蒙 如何将base64的图片保存到相册
甄兴旺的博客
06-14 1033
方案二：通过申请ACL权限。类似这样： { // 允许修改用户公共目录的图片或视频文件。"name": "ohos.permission.WRITE_IMAGEVIDEO", "reason": "$string:internet_permission_reason", "usedScene": { "when": "always" } }
鸿蒙5.0版开发：ArkTS组件-SaveButton
m0_69424697的博客
12-02 955
安全控件的保存控件，用户通过点击该保存按钮，可以临时获取存储权限，而不需要权限弹框授权确认。
鸿蒙5.0版开发：ArkTS组件-安全控件通用属性
m0_69424697的博客
12-01 793
安全控件的基础属性，用于设置安全控件通用的属性。
鸿蒙5.0开发进阶：ArkTS组件-安全控件通用属性
Androidbye的博客
02-13 805
安全控件的基础属性，用于设置安全控件通用的属性。
鸿蒙5.0开发进阶：Web页面长截图实现案例
HSMMQAQ的博客
10-09 1057
本案例实现了Web组件中网页长截图的方案。
在鸿蒙中如何把网络图片保存到相册中
自然 醒的博客
06-25 2590
在鸿蒙中如何把网络图片保存到相册中，首先我们需要去配置ohos.permission.WRITE_IMAGEVIDEO这个受限权限，其次，如果想要使用这个权限，还需要去自动签名或者手动签名，最后通过http请求到图片，通过文件文件写入，实现这个功能。想要读取手机相册中的图片，也可以参考这个实现代码。
【HarmonyOS】SaveButton保存图片
zhongcongxu01的专栏
09-26 881
1、样式不支持自定义图标，试过用opacity修改透明度，然后添加背景来实现自定义样式，结果也失败了，opacity(1)点击生效，opacity(0.9)后点击按钮就不生效了。SaveButton组件把图片显示到相册中的方法demo，支持组件截图、url网络图片、base64格式图片。2、如果带Scroll时，下载按钮被遮挡一部分，也无法保存到相册。比如下面这样遮挡一点点下载按钮后，点击就没办法保存到相册了。2、下载按钮被遮挡一部分，也无法保存到相册。1、不支持自定义SaveButton样式。
【HarmonyOS】鸿蒙开发之Button组件——第3.4章
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
02-18 3376
沉默小管 鸿蒙开发之Button组件
HarmonyOS实战开发-安全控件类型的UI控件（仅对系统应用开放）
2401_82546228的博客
04-07 1246
本示例提供了安全控件类型的UI控件，支撑应用开发者集成安全控件做临时授权场景，当用户实际点击了某种类型的安全控件时，会对应用进行相应的临时授权，减少权限弹窗对用户的干扰，同时提供更小的授权范围。
鸿蒙API14开发【SaveButton】ArkTS组件
最新发布
bbq的博客
06-12 954
摘要： SaveButton组件从API 10开始提供，支持创建带有临时存储权限的保存按钮，无需弹框授权。该组件包含icon、text及背景样式配置选项，其中icon支持填充/线条两种样式，text提供12种预设描述文本。通过onClick事件可获取操作结果（成功/授权失败），适用于下载、保存文件等场景。从API 11起支持原子化服务，API 12新增4种图库相关文本选项。
鸿蒙next--使用安全控件SaveButton保存网络图片配置及不生效解决办法
weixin_46525113的博客
11-15 636
鸿蒙next使用安全控件SaveButton，下载并保存网络图片到手机上，解决http访问失败问题、运行时报错”It is not allowed to access this domain.“2300998 不允许访问域名等
HarmonyOS实战开发-如何实现Web组件中网页长截图。
m0_70749039的博客
05-07 1393
本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能
鸿蒙HarmonyOS实战案例：安全UI控件类型
2401_84917132的博客
08-20 795
在主界面，点击“SaveButton安全控件”按钮，进入“SaveButton安全控件”界面，点击“下载”按钮，将当前页面中的图片保存到本地图库中。
鸿蒙ArkTs实战之截图保存图片到相册，详细教程，不使用SaveButton的方法，附上源码和效果图
weixin_64952546的博客
05-08 2197
在鸿蒙应用开发过程中时常遇见需要截图保存到相册的场景，如果使用安全控件SaveButton保存图片到相册，无法给它自定义样式，有很多限制，和实际开发场景不是很适配，所以呢，使用api的方式去保存，这样可以直接自定义保存图片的时机，自定义保存图片按钮的样式，更加贴合实际开发场景，下面结合一个截图保存到相册的小案例来阐述如何截图并绕开SaveButton，自定义保存样式，实现截图并保存到相册的功能，附上完整代码，以及效果图。
鸿蒙技术分享：鸿蒙元服务踩坑血泪：文件下载、选择、打开
FantasyWind-奇风的悟道之地
12-05 1024
鸿蒙开发中如何通过安全控件SaveButton进行下载？
04-03
<think>好的，我现在需要帮助用户解决在鸿蒙开发中使用SaveButton安全控件实现下载功能的问题。首先，我需要了解用户的需求。用户可能已经知道SaveButton用于保存图片，但想知道如何用它实现下载功能，比如从网络下载图片并保存。接下来，我应该查阅提供的引用内容，看看是否有相关的信息。 引用[1]提到SaveButton是一个保存图片的控件，并提到了在HarmonyOS 50中的截图保存功能。引用[4]和[5]详细说明了SaveButton的配置和onClick事件的使用。但用户的问题是关于下载功能，可能需要结合网络请求和文件保存。 我需要确认SaveButton是否直接支持下载功能，还是需要结合其他API。根据引用内容，SaveButton主要用于保存图片，可能需要先下载图片到本地，再使用SaveButton保存。因此，步骤可能包括：使用网络模块下载图片，获取文件路径，然后通过SaveButton保存到相册。 另外，引用[5]提到配置网络权限和保存路径，这可能是在下载过程中需要的。需要确保应用有正确的权限，比如ohos.permission.INTERNET和ohos.permission.WRITE_USER_STORAGE。同时，下载后的文件路径需要传递给SaveButton的filePath或fileDir属性。 可能遇到的问题包括下载失败、权限未配置导致保存不生效，或者路径错误。需要检查网络请求是否正确，文件是否下载成功，以及SaveButton的参数是否设置正确。此外，还要注意SaveButton的可见性和点击事件处理。 现在，我需要将这些步骤整理成一个清晰的流程，分步骤说明如何实现下载功能，并附上示例代码。同时，要提醒用户注意权限配置和常见问题。最后，生成相关问题，帮助用户深入理解。</think>在鸿蒙开发中，使用安全控件SaveButton实现下载功能需结合网络请求与文件存储功能，具体实现步骤如下： ### 一、基础配置 1. **权限配置** 在`module.json5`中添加网络访问和文件写入权限： ```json "requestPermissions": [ {"name": "ohos.permission.INTERNET"}, {"name": "ohos.permission.WRITE_USER_STORAGE"} ] ``` 2. **SaveButton属性设置** 通过`filePath`指定保存路径或`fileDir`设置保存目录，需注意路径需符合安全控件规范[^1][^4]： ```typescript SaveButton({ filePath: '/data/storage/el2/base/cache/downloaded_image.jpg' }) ``` ### 二、下载功能实现 ```typescript import http from '@ohos.net.http'; import fileIO from '@ohos.fileio'; @Entry @Component struct DownloadPage { @State imagePath: string = '' // 下载网络图片 async downloadImage(url: string) { const httpRequest = http.createHttp(); const response = await httpRequest.request(url); const cacheDir = getContext().cacheDir; // 获取应用缓存目录 const filePath = cacheDir + '/downloaded_image.jpg'; await fileIO.writeFile(filePath, response.result); this.imagePath = filePath; } build() { Column() { // 下载按钮 Button('下载图片') .onClick(() => { this.downloadImage('https://example.com/image.jpg'); }) // 保存控件 SaveButton({ filePath: this.imagePath, onSuccess: () => { console.log('保存成功'); } }) .visibility(this.imagePath ? Visibility.Visible : Visibility.Hidden) } } } ``` ### 三、关键注意事项 1. **网络请求白名单** HarmonyOS NEXT需在`module.json5`配置网络域名白名单[^5]： ```json "deviceConfig": { "default": { "network": { "cleartextTraffic": true, "securityConfig": { "domainSettings": { "domains": [{ "name": "example.com" }] } } } } } ``` 2. **保存路径规范** 必须使用应用沙箱路径（如`cacheDir`或`filesDir`），禁止直接使用外部存储路径[^1][^3] 3. **事件处理优化** 建议添加错误回调处理： ```typescript SaveButton({ onError: (errCode, errMsg) => { console.error(`保存失败：${errCode}-${errMsg}`); } }) ``` ### 四、常见问题解决 - **保存不生效** 检查：① 文件路径是否真实存在 ② 文件格式是否支持（需为jpg/png）③ 是否开启存储权限[^5] - **网络图片无法下载** 确认：① 是否配置域名白名单 ② 是否开启HTTPS（NEXT强制要求）③ 服务端CORS配置[^5] ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值