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