1# DownloadFileButton 2 3**DownloadFileButton** is a download button that, when clicked, allows you to obtain the storage location of the current application in the public **Download** directory. 4 5 6> **NOTE** 7> 8> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 9 10## Modules to Import 11 12``` 13import { DownloadFileButton } from '@kit.ArkUI' 14``` 15 16## Child Components 17 18Not supported 19 20## Attributes 21 22The [universal attributes](ts-component-general-attributes.md) are supported. 23 24## DownloadFileButton 25 26Creates a download file button, which by default displays both an icon and text. 27 28**Decorator**: @Component 29 30**Atomic service API**: This API can be used in atomic services since API version 12. 31 32**System capability**: SystemCapability.ArkUI.ArkUI.Full 33 34| Name | Type | Mandatory| Decorator| Description | 35| -------------- | ------------------------------------------------- | ---- | ---------- | -------------------------------- | 36| contentOptions | [DownloadContentOptions](#downloadcontentoptions) | Yes | @State | Content options for creating the download file button.| 37| styleOptions | [DownloadStyleOptions](#downloadstyleoptions) | Yes | @State | Style options for creating the download file button.| 38 39## DownloadContentOptions 40 41Defines the content displayed in the download file button. 42 43**Atomic service API**: This API can be used in atomic services since API version 12. 44 45**System capability**: SystemCapability.ArkUI.ArkUI.Full 46 47| Name| Type | Mandatory| Description | 48| ---- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 49| icon | [DownloadIconStyle](#downloadiconstyle) | No | Icon style of the download file button.<br>If this parameter is not specified, no icon is contained. Either **icon** or **text**, or both, must be set.| 50| text | [DownloadDescription](#downloaddescription) | No | Text on the download file button.<br>If this parameter is not specified, no text is contained. Either **icon** or **text**, or both, must be set.| 51 52## DownloadStyleOptions 53 54Defines the style of the icon and text in the download file button. 55 56**Atomic service API**: This API can be used in atomic services since API version 12. 57 58**System capability**: SystemCapability.ArkUI.ArkUI.Full 59 60| Name | Type | Mandatory| Description | 61| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 62| iconSize | Dimension | No | Icon size of the download file button. The value cannot be in percentage.<br>Default value: **16vp** | 63| layoutDirection | [DownloadLayoutDirection](#downloadlayoutdirection) | No | Direction of the icon and text on the download file button.<br>Default value: **DownloadLayoutDirection.HORIZONTAL**| 64| fontSize | Dimension | No | Font size of the download file button. The value cannot be in percentage.<br>Default value: **16fp** | 65| fontStyle | FontStyle | No | Font style of the download file button.<br>Default value: **FontStyle.Normal** | 66| fontWeight | number \| FontWeight \| string | No | Font weight of the download file button. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a heavier font weight. For the string type, only strings that represent a number, for example, **400**, and the following enumerated values of **FontWeight** are supported: **bold**, **bolder**, **lighter**, **regular**, and **medium**.<br>Default value: **FontWeight.Medium** | 67| fontFamily | string \| Resource | No | Font family of the download file button.<br>Default font: **'HarmonyOS Sans'** | 68| fontColor | ResourceColor | No | Font color of the download file button.<br>Default value: **#ffffffff** | 69| iconColor | ResourceColor | No | Icon color of the download file button.<br>Default value: **#ffffffff** | 70| textIconSpace | Dimension | No | Space between the icon and text on the download file button.<br>Default value: **4vp** | 71 72## DownloadIconStyle 73 74Defines the icon style of the download file button. 75 76**Atomic service API**: This API can be used in atomic services since API version 12. 77 78**System capability**: SystemCapability.ArkUI.ArkUI.Full 79 80| Name | Value | Description | 81| ----------- | ---- | -------------------------- | 82| FULL_FILLED | 1 | Filled style icon.| 83| LINES | 2 | Line style icon.| 84 85 86 87## DownloadDescription 88 89Defines the text on the download file button. 90 91**Atomic service API**: This API can be used in atomic services since API version 12. 92 93**System capability**: SystemCapability.ArkUI.ArkUI.Full 94 95| Name | Value | Description | 96| ------------------- | ---- | -------------------------------- | 97| DOWNLOAD | 1 | The text on the download file button is **Download**. | 98| DOWNLOAD_FILE | 2 | The text on the download file button is **Download File**.| 99| SAVE | 3 | The text on the download file button is **Save**. | 100| SAVE_IMAGE | 4 | The text on the download file button is **Save Image**.| 101| SAVE_FILE | 5 | The text on the download file button is **Save File**.| 102| DOWNLOAD_AND_SHARE | 6 | The text on the download file button is **Download and Share**.| 103| RECEIVE | 7 | The text on the download file button is **Receive**. | 104| CONTINUE_TO_RECEIVE | 8 | The text on the download file button is **Continue**.| 105 106 107 108## DownloadLayoutDirection 109 110Defines the direction of the icon and text in the download file button. 111 112**Atomic service API**: This API can be used in atomic services since API version 12. 113 114**System capability**: SystemCapability.ArkUI.ArkUI.Full 115 116| Name | Value | Description | 117| ---------- | ---- | ------------------------------------------ | 118| HORIZONTAL | 0 | The icon and text on the download file button are horizontally arranged.| 119| VERTICAL | 1 | The icon and text on the download file button are vertically arranged.| 120 121## Events 122 123The [universal events](ts-component-general-events.md) are supported. 124 125## Example 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
