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
26Downloadbutton(contentOptions?:DownloadContentOptions, styleOptions?:DownloadStyleOptions)
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**Parameters**
37
38| Name          | Type                                                        | Mandatory| Decorator| Description                            |
39| -------------- | ------------------------------------------------------------ | ---- | ---------- | -------------------------------- |
40| contentOptions | [DownloadContentOptions](#downloadcontentoptions) | No  | @State     | Content options for creating the download file button.|
41| styleOptions   | [DownloadStyleOptions](#downloadstyleoptions) | No  | @State     | Style options for creating the download file button.|
42
43## DownloadContentOptions
44
45Defines the content displayed in the download file button.
46
47**Atomic service API**: This API can be used in atomic services since API version 12.
48
49**System capability**: SystemCapability.ArkUI.ArkUI.Full
50
51| Name| Type                                                        | Mandatory| Description                                                        |
52| ---- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
53| 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.|
54| 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.|
55
56## DownloadStyleOptions
57
58Defines the style of the icon and text in the download file button.
59
60**Atomic service API**: This API can be used in atomic services since API version 12.
61
62**System capability**: SystemCapability.ArkUI.ArkUI.Full
63
64| Name           | Type                                                        | Mandatory| Description                                                        |
65| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
66| iconSize        | Dimension                                                    | No  | Icon size of the download file button.<br>Default value: **16vp**                     |
67| layoutDirection | [DownloadLayoutDirection](#downloadlayoutdirection) | No  | Direction of the icon and text on the download file button.<br>Default value: **DownloadLayoutDirection.HORIZONTAL**|
68| fontSize        | Dimension                                                    | No  | Font size of the download file button.<br>Default value: **16fp**                     |
69| fontStyle       | FontStyle                                                    | No  | Font style of the download file button.<br>Default value: **FontStyle.Normal**         |
70| fontWeight      | number \| FontWeight \| string                               | No  | Font weight of the download file button.<br>Default value: **FontWeight.Medium**          |
71| fontFamily      | string \| Resource                                           | No  | Font family of the download file button.<br>Default font: **'HarmonyOS Sans'**       |
72| fontColor       | ResourceColor                                                | No  | Font color of the download file button.<br>Default value: **#ffffffff**                |
73| iconColor       | ResourceColor                                                | No  | Icon color of the download file button.<br>Default value: **#ffffffff**                |
74| textIconSpace   | Dimension                                                    | No  | Space between the icon and text on the download file button.<br>Default value: **4vp**                |
75
76## DownloadIconStyle
77
78Defines the icon style of the download file button.
79
80**Atomic service API**: This API can be used in atomic services since API version 12.
81
82**System capability**: SystemCapability.ArkUI.ArkUI.Full
83
84| Name       | Value  | Description                      |
85| ----------- | ---- | -------------------------- |
86| FULL_FILLED | 1    | Filled style icon.|
87| LINES       | 2    | Line style icon.|
88
89
90
91## DownloadDescription
92
93Defines the text on the download file button.
94
95**Atomic service API**: This API can be used in atomic services since API version 12.
96
97**System capability**: SystemCapability.ArkUI.ArkUI.Full
98
99| Name               | Value  | Description                            |
100| ------------------- | ---- | -------------------------------- |
101| DOWNLOAD            | 1    | The text on the download file button is **Download**.    |
102| DOWNLOAD_FILE       | 2    | The text on the download file button is **Download File**.|
103| SAVE                | 3    | The text on the download file button is **Save**.    |
104| SAVE_IMAGE          | 4    | The text on the download file button is **Save Image**.|
105| SAVE_FILE           | 5    | The text on the download file button is **Save File**.|
106| DOWNLOAD_AND_SHARE  | 6    | The text on the download file button is **Download and Share**.|
107| RECEIVE             | 7    | The text on the download file button is **Receive**.    |
108| CONTINUE_TO_RECEIVE | 8    | The text on the download file button is **Continue**.|
109
110
111
112## DownloadLayoutDirection
113
114Defines the direction of the icon and text in the download file button.
115
116**Atomic service API**: This API can be used in atomic services since API version 12.
117
118**System capability**: SystemCapability.ArkUI.ArkUI.Full
119
120| Name      | Value  | Description                                      |
121| ---------- | ---- | ------------------------------------------ |
122| HORIZONTAL | 0    | The icon and text on the download file button are horizontally arranged.|
123| VERTICAL   | 1    | The icon and text on the download file button are vertically arranged.|
124
125## Events
126
127The [universal events](ts-universal-events-click.md) are supported.
128
129##  Example
130
131```
132import { picker } from '@kit.CoreFileKit';
133import { BusinessError } from '@kit.BasicServicesKit';
134import { DownloadFileButton, DownloadLayoutDirection } 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        .borderColor('')
162        .borderRadius('24vp')
163        .position({ x: 0, y: 0 })
164        .markAnchor({ x: 0, y: 0 })
165        .offset({ x: 0, y: 0 })
166        .constraintSize({})
167        .padding({
168          top: '12vp',
169          bottom: '12vp',
170          left: '24vp',
171          right: '24vp'
172        })
173        .onClick(() => {
174          this.downloadAction();
175        })
176    }
177  }
178
179  downloadAction() {
180    try {
181      const document = new picker.DocumentSaveOptions();
182      document.pickerMode = picker.DocumentPickerMode.DOWNLOAD;
183      new picker.DocumentViewPicker().save(document, (err: BusinessError, result: Array<string>) => {
184        if (err) {
185          return;
186        }
187        console.info(`downloadAction result:  ${JSON.stringify(result)}`);
188      });
189    } catch (e) {
190    }
191  }
192}
193```
194
195![en-us_image_0000001643320073](figures/en-us_image_0000001643320073.png)
196