DownloadFileButton
DownloadFileButton is a download button that, when clicked, allows you to obtain the storage location of the current application in the public Download directory.
NOTE
This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
Modules to Import
import { DownloadFileButton } from '@kit.ArkUI'
Child Components
Not supported
Attributes
The universal attributes are supported.
DownloadFileButton
Creates a download file button, which by default displays both an icon and text.
Decorator: @Component
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Decorator | Description |
|---|---|---|---|---|
| contentOptions | DownloadContentOptions | Yes | @State | Content options for creating the download file button. |
| styleOptions | DownloadStyleOptions | Yes | @State | Style options for creating the download file button. |
DownloadContentOptions
Defines the content displayed in the download file button.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| icon | DownloadIconStyle | No | Icon style of the download file button. If this parameter is not specified, no icon is contained. Either icon or text, or both, must be set. |
| text | DownloadDescription | No | Text on the download file button. If this parameter is not specified, no text is contained. Either icon or text, or both, must be set. |
DownloadStyleOptions
Defines the style of the icon and text in the download file button.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| iconSize | Dimension | No | Icon size of the download file button. The value cannot be in percentage. Default value: 16vp |
| layoutDirection | DownloadLayoutDirection | No | Direction of the icon and text on the download file button. Default value: DownloadLayoutDirection.HORIZONTAL |
| fontSize | Dimension | No | Font size of the download file button. The value cannot be in percentage. Default value: 16fp |
| fontStyle | FontStyle | No | Font style of the download file button. Default value: FontStyle.Normal |
| 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. Default value: FontWeight.Medium |
| fontFamily | string |Resource | No | Font family of the download file button. Default font: 'HarmonyOS Sans' |
| fontColor | ResourceColor | No | Font color of the download file button. Default value: #ffffffff |
| iconColor | ResourceColor | No | Icon color of the download file button. Default value: #ffffffff |
| textIconSpace | Dimension | No | Space between the icon and text on the download file button. Default value: 4vp |
DownloadIconStyle
Defines the icon style of the download file button.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Value | Description |
|---|---|---|
| FULL_FILLED | 1 | Filled style icon. |
| LINES | 2 | Line style icon. |
DownloadDescription
Defines the text on the download file button.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Value | Description |
|---|---|---|
| DOWNLOAD | 1 | The text on the download file button is Download. |
| DOWNLOAD_FILE | 2 | The text on the download file button is Download File. |
| SAVE | 3 | The text on the download file button is Save. |
| SAVE_IMAGE | 4 | The text on the download file button is Save Image. |
| SAVE_FILE | 5 | The text on the download file button is Save File. |
| DOWNLOAD_AND_SHARE | 6 | The text on the download file button is Download and Share. |
| RECEIVE | 7 | The text on the download file button is Receive. |
| CONTINUE_TO_RECEIVE | 8 | The text on the download file button is Continue. |
DownloadLayoutDirection
Defines the direction of the icon and text in the download file button.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Value | Description |
|---|---|---|
| HORIZONTAL | 0 | The icon and text on the download file button are horizontally arranged. |
| VERTICAL | 1 | The icon and text on the download file button are vertically arranged. |
Events
The universal events are supported.
Example
// xxx.ets
import { picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { DownloadFileButton, DownloadLayoutDirection, DownloadIconStyle, DownloadDescription } from '@kit.ArkUI';
@Entry
@Component
struct Index {
build() {
Column() {
DownloadFileButton({
contentOptions: {
icon: DownloadIconStyle.FULL_FILLED,
text: DownloadDescription.DOWNLOAD
},
styleOptions: {
iconSize: '16vp',
layoutDirection: DownloadLayoutDirection.HORIZONTAL,
fontSize: '16vp',
fontStyle: FontStyle.Normal,
fontWeight: FontWeight.Medium,
fontFamily: 'HarmonyOS Sans',
fontColor: '#ffffffff',
iconColor: '#ffffffff',
textIconSpace: '4vp'
}
})
.backgroundColor('#007dff')
.borderStyle(BorderStyle.Dotted)
.borderWidth(0)
.borderRadius('24vp')
.position({ x: 0, y: 0 })
.markAnchor({ x: 0, y: 0 })
.offset({ x: 0, y: 0 })
.constraintSize({})
.padding({
top: '12vp',
bottom: '12vp',
left: '24vp',
right: '24vp'
})
.onClick(() => {
this.downloadAction();
})
}
}
downloadAction() {
try {
const document = new picker.DocumentSaveOptions();
document.pickerMode = picker.DocumentPickerMode.DOWNLOAD;
new picker.DocumentViewPicker().save(document, (err: BusinessError, result: Array<string>) => {
if (err) {
return;
}
console.info(`downloadAction result: ${JSON.stringify(result)}`);
});
} catch (e) {
}
}
}
