1# DownloadFileButton
2
3下载文件按钮，通过点击该下载按钮，可以获取到当前应用在Download公共目录中所属的存储路径。
4
5
6> **说明：**
7>
8> 该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
9
10##  导入模块
11
12```
13import { DownloadFileButton } from '@kit.ArkUI'
14```
15
16## 子组件
17
18无
19
20## 属性
21
22支持[通用属性](ts-universal-attributes-size.md)。
23
24## DownloadFileButton
25
26Downloadbutton(contentOptions?:DownloadContentOptions, styleOptions?:DownloadStyleOptions)
27
28下载文件按钮组件，默认显示图标和文字。
29
30**装饰器类型：**@Component
31
32**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
33
34**系统能力**： SystemCapability.ArkUI.ArkUI.Full
35
36**参数：**
37
38| 名称           | 类型                                                         | 必填 | 装饰器类型 | 说明                             |
39| -------------- | ------------------------------------------------------------ | ---- | ---------- | -------------------------------- |
40| contentOptions | [DownloadContentOptions](#downloadcontentoptions) | 否   | @State     | 创建包含指定元素内容的下载按钮。 |
41| styleOptions   | [DownloadStyleOptions](#downloadstyleoptions) | 否   | @State     | 创建包含指定元素样式的下载按钮。 |
42
43## DownloadContentOptions
44
45下载文件按钮中显示的内容。
46
47**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
48
49**系统能力**： SystemCapability.ArkUI.ArkUI.Full
50
51| 名称 | 类型                                                         | 必填 | 说明                                                         |
52| ---- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
53| icon | [DownloadIconStyle](#downloadiconstyle) | 否   | 设置下载按钮的图标风格<br/>不传入该参数表示没有图标，icon和text至少存在一个。 |
54| text | [DownloadDescription](#downloaddescription) | 否   | 设置下载按钮的文本描述<br/>不传入该参数表示没有文字描述，icon和text至少存在一个。 |
55
56## DownloadStyleOptions
57
58下载文件按钮中图标和文字的样式。
59
60**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
61
62**系统能力**： SystemCapability.ArkUI.ArkUI.Full
63
64| 名称            | 类型                                                         | 必填 | 说明                                                         |
65| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
66| iconSize        | Dimension                                                    | 否   | 下载控件上图标的尺寸。<br/>默认值：16vp                      |
67| layoutDirection | [DownloadLayoutDirection](#downloadlayoutdirection) | 否   | 下载控件上图标和文字分布的方向。<br/>默认值：DownloadLayoutDirection.HORIZONTAL |
68| fontSize        | Dimension                                                    | 否   | 下载控件上文字的尺寸。<br/>默认值：16fp                      |
69| fontStyle       | FontStyle                                                    | 否   | 下载控件上文字的样式。<br/>默认值：FontStyle.Normal          |
70| fontWeight      | number \| FontWeight \| string                               | 否   | 下载控件上文字粗细。<br/>默认值：FontWeight.Medium           |
71| fontFamily      | string \| Resource                                           | 否   | 下载控件上文字的字体。<br/>默认字体：'HarmonyOS Sans'        |
72| fontColor       | ResourceColor                                                | 否   | 下载控件上文字的颜色。<br/>默认值：#ffffffff                 |
73| iconColor       | ResourceColor                                                | 否   | 下载控件上图标的颜色。<br/>默认值：#ffffffff                 |
74| textIconSpace   | Dimension                                                    | 否   | 下载控件中图标和文字的间距。<br/>默认值：4vp                 |
75
76## DownloadIconStyle
77
78下载文件按钮中图标的风格。
79
80**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
81
82**系统能力**： SystemCapability.ArkUI.ArkUI.Full
83
84| 名称        | 值   | 说明                       |
85| ----------- | ---- | -------------------------- |
86| FULL_FILLED | 1    | 下载按钮展示填充样式图标。 |
87| LINES       | 2    | 下载按钮展示线条样式图标。 |
88
89
90
91## DownloadDescription
92
93下载按钮中文字的内容。
94
95**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
96
97**系统能力**： SystemCapability.ArkUI.ArkUI.Full
98
99| 名称                | 值   | 说明                             |
100| ------------------- | ---- | -------------------------------- |
101| DOWNLOAD            | 1    | 下载按钮的文字描述为“下载”。     |
102| DOWNLOAD_FILE       | 2    | 下载按钮的文字描述为“下载文件”。 |
103| SAVE                | 3    | 下载按钮的文字描述为“保存”。     |
104| SAVE_IMAGE          | 4    | 下载按钮的文字描述为“保存图片”。 |
105| SAVE_FILE           | 5    | 下载按钮的文字描述为“保存文件”。 |
106| DOWNLOAD_AND_SHARE  | 6    | 下载按钮的文字描述为“下载分享”。 |
107| RECEIVE             | 7    | 下载按钮的文字描述为“接收”。     |
108| CONTINUE_TO_RECEIVE | 8    | 下载按钮的文字描述为“继续接收”。 |
109
110
111
112## DownloadLayoutDirection
113
114下载文件按钮中图标和文字的排列方式。
115
116**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
117
118**系统能力**： SystemCapability.ArkUI.ArkUI.Full
119
120| 名称       | 值   | 说明                                       |
121| ---------- | ---- | ------------------------------------------ |
122| HORIZONTAL | 0    | 下载控件上图标和文字分布的方向为水平排列。 |
123| VERTICAL   | 1    | 下载控件上图标和文字分布的方向为垂直排列。 |
124
125## 事件
126
127支持[通用事件](ts-universal-events-click.md)。
128
129##  示例
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![zh-cn_image_0000001643320073](figures/zh-cn_image_0000001643320073.png)
196