1# DownloadFileButton 2 3下载文件按钮，通过点击该下载按钮，可以获取到当前应用在Download公共目录中所属的存储路径。 4 5 6> **说明：** 7> 8> 该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10## 导入模块 11 12``` 13import { DownloadFileButton } from '@kit.ArkUI' 14``` 15 16## 子组件 17 18无 19 20## 属性 21 22支持[通用属性](ts-component-general-attributes.md)。 23 24## DownloadFileButton 25 26下载文件按钮组件，默认显示图标和文字。 27 28**装饰器类型：**@Component 29 30**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 31 32**系统能力**： SystemCapability.ArkUI.ArkUI.Full 33 34| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 35| -------------- | ------------------------------------------------- | ---- | ---------- | -------------------------------- | 36| contentOptions | [DownloadContentOptions](#downloadcontentoptions) | 是 | @State | 创建包含指定元素内容的下载按钮。 | 37| styleOptions | [DownloadStyleOptions](#downloadstyleoptions) | 是 | @State | 创建包含指定元素样式的下载按钮。 | 38 39## DownloadContentOptions 40 41下载文件按钮中显示的内容。 42 43**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 44 45**系统能力**： SystemCapability.ArkUI.ArkUI.Full 46 47| 名称 | 类型 | 必填 | 说明 | 48| ---- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 49| icon | [DownloadIconStyle](#downloadiconstyle) | 否 | 设置下载按钮的图标风格<br/>不传入该参数表示没有图标，icon和text至少存在一个。 | 50| text | [DownloadDescription](#downloaddescription) | 否 | 设置下载按钮的文本描述<br/>不传入该参数表示没有文字描述，icon和text至少存在一个。 | 51 52## DownloadStyleOptions 53 54下载文件按钮中图标和文字的样式。 55 56**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 57 58**系统能力**： SystemCapability.ArkUI.ArkUI.Full 59 60| 名称 | 类型 | 必填 | 说明 | 61| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 62| iconSize | Dimension | 否 | 下载控件上图标的尺寸。<br/>默认值：16vp | 63| layoutDirection | [DownloadLayoutDirection](#downloadlayoutdirection) | 否 | 下载控件上图标和文字分布的方向。<br/>默认值：DownloadLayoutDirection.HORIZONTAL | 64| fontSize | Dimension | 否 | 下载控件上文字的尺寸。<br/>默认值：16fp | 65| fontStyle | FontStyle | 否 | 下载控件上文字的样式。<br/>默认值：FontStyle.Normal | 66| fontWeight | number \| FontWeight \| string | 否 | 下载控件上文字粗细。<br/>默认值：FontWeight.Medium | 67| fontFamily | string \| Resource | 否 | 下载控件上文字的字体。<br/>默认字体：'HarmonyOS Sans' | 68| fontColor | ResourceColor | 否 | 下载控件上文字的颜色。<br/>默认值：#ffffffff | 69| iconColor | ResourceColor | 否 | 下载控件上图标的颜色。<br/>默认值：#ffffffff | 70| textIconSpace | Dimension | 否 | 下载控件中图标和文字的间距。<br/>默认值：4vp | 71 72## DownloadIconStyle 73 74下载文件按钮中图标的风格。 75 76**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 77 78**系统能力**： SystemCapability.ArkUI.ArkUI.Full 79 80| 名称 | 值 | 说明 | 81| ----------- | ---- | -------------------------- | 82| FULL_FILLED | 1 | 下载按钮展示填充样式图标。 | 83| LINES | 2 | 下载按钮展示线条样式图标。 | 84 85 86 87## DownloadDescription 88 89下载按钮中文字的内容。 90 91**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 92 93**系统能力**： SystemCapability.ArkUI.ArkUI.Full 94 95| 名称 | 值 | 说明 | 96| ------------------- | ---- | -------------------------------- | 97| DOWNLOAD | 1 | 下载按钮的文字描述为“下载”。 | 98| DOWNLOAD_FILE | 2 | 下载按钮的文字描述为“下载文件”。 | 99| SAVE | 3 | 下载按钮的文字描述为“保存”。 | 100| SAVE_IMAGE | 4 | 下载按钮的文字描述为“保存图片”。 | 101| SAVE_FILE | 5 | 下载按钮的文字描述为“保存文件”。 | 102| DOWNLOAD_AND_SHARE | 6 | 下载按钮的文字描述为“下载分享”。 | 103| RECEIVE | 7 | 下载按钮的文字描述为“接收”。 | 104| CONTINUE_TO_RECEIVE | 8 | 下载按钮的文字描述为“继续接收”。 | 105 106 107 108## DownloadLayoutDirection 109 110下载文件按钮中图标和文字的排列方式。 111 112**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 113 114**系统能力**： SystemCapability.ArkUI.ArkUI.Full 115 116| 名称 | 值 | 说明 | 117| ---------- | ---- | ------------------------------------------ | 118| HORIZONTAL | 0 | 下载控件上图标和文字分布的方向为水平排列。 | 119| VERTICAL | 1 | 下载控件上图标和文字分布的方向为垂直排列。 | 120 121## 事件 122 123支持[通用事件](ts-component-general-events.md)。 124 125## 示例 126 127```ts 128// xxx.ets 129 130import { picker } from '@kit.CoreFileKit'; 131import { BusinessError } from '@kit.BasicServicesKit'; 132import { DownloadFileButton, DownloadLayoutDirection, DownloadIconStyle, DownloadDescription } from '@kit.ArkUI'; 133 134@Entry 135@Component 136struct Index { 137 build() { 138 Column() { 139 DownloadFileButton({ 140 contentOptions: { 141 icon: DownloadIconStyle.FULL_FILLED, 142 text: DownloadDescription.DOWNLOAD 143 }, 144 styleOptions: { 145 iconSize: '16vp', 146 layoutDirection: DownloadLayoutDirection.HORIZONTAL, 147 fontSize: '16vp', 148 fontStyle: FontStyle.Normal, 149 fontWeight: FontWeight.Medium, 150 fontFamily: 'HarmonyOS Sans', 151 fontColor: '#ffffffff', 152 iconColor: '#ffffffff', 153 textIconSpace: '4vp' 154 } 155 }) 156 .backgroundColor('#007dff') 157 .borderStyle(BorderStyle.Dotted) 158 .borderWidth(0) 159 .borderRadius('24vp') 160 .position({ x: 0, y: 0 }) 161 .markAnchor({ x: 0, y: 0 }) 162 .offset({ x: 0, y: 0 }) 163 .constraintSize({}) 164 .padding({ 165 top: '12vp', 166 bottom: '12vp', 167 left: '24vp', 168 right: '24vp' 169 }) 170 .onClick(() => { 171 this.downloadAction(); 172 }) 173 } 174 } 175 176 downloadAction() { 177 try { 178 const document = new picker.DocumentSaveOptions(); 179 document.pickerMode = picker.DocumentPickerMode.DOWNLOAD; 180 new picker.DocumentViewPicker().save(document, (err: BusinessError, result: Array<string>) => { 181 if (err) { 182 return; 183 } 184 console.info(`downloadAction result: ${JSON.stringify(result)}`); 185 }); 186 } catch (e) { 187 } 188 } 189} 190``` 191 192 193
