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