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-universal-attributes-size.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) | No | @State | Content options for creating the download file button.| 37| styleOptions | [DownloadStyleOptions](#downloadstyleoptions) | No | @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.<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.<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.<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-universal-events-click.md) are supported. 124 125## Example 126 127``` 128import { picker } from '@kit.CoreFileKit'; 129import { BusinessError } from '@kit.BasicServicesKit'; 130import { DownloadFileButton, DownloadLayoutDirection } from '@kit.ArkUI'; 131 132@Entry 133@Component 134struct Index { 135 build() { 136 Column() { 137 DownloadFileButton({ 138 contentOptions: { 139 // icon: DownloadIconStyle.FULL_FILLED, 140 // text: DownloadDescription.DOWNLOAD 141 }, 142 styleOptions: { 143 iconSize: '16vp', 144 layoutDirection: DownloadLayoutDirection.HORIZONTAL, 145 fontSize: '16vp', 146 fontStyle: FontStyle.Normal, 147 fontWeight: FontWeight.Medium, 148 fontFamily: 'HarmonyOS Sans', 149 fontColor: '#ffffffff', 150 iconColor: '#ffffffff', 151 textIconSpace: '4vp' 152 } 153 }) 154 .backgroundColor('#007dff') 155 .borderStyle(BorderStyle.Dotted) 156 .borderWidth(0) 157 .borderRadius('24vp') 158 .position({ x: 0, y: 0 }) 159 .markAnchor({ x: 0, y: 0 }) 160 .offset({ x: 0, y: 0 }) 161 .constraintSize({}) 162 .padding({ 163 top: '12vp', 164 bottom: '12vp', 165 left: '24vp', 166 right: '24vp' 167 }) 168 .onClick(() => { 169 this.downloadAction(); 170 }) 171 } 172 } 173 174 downloadAction() { 175 try { 176 const document = new picker.DocumentSaveOptions(); 177 document.pickerMode = picker.DocumentPickerMode.DOWNLOAD; 178 new picker.DocumentViewPicker().save(document, (err: BusinessError, result: Array<string>) => { 179 if (err) { 180 return; 181 } 182 console.info(`downloadAction result: ${JSON.stringify(result)}`); 183 }); 184 } catch (e) { 185 } 186 } 187} 188``` 189 190 191
