1e41f4b71Sopenharmony_ci# Downloading Files 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci## Listening for Downloads Initiated from Pages 4e41f4b71Sopenharmony_ci 5e41f4b71Sopenharmony_ciCall [setDownloadDelegate()](../reference/apis-arkweb/js-apis-webview.md#setdownloaddelegate11) to register a **DownloadDelegate** object with the **\<Web>** component to listen for downloads initiated from pages. While the **\<Web>** component downloads resources as requested, it notifies the application of the download progress through the **DownloadDelegate** object. 6e41f4b71Sopenharmony_ci 7e41f4b71Sopenharmony_ciIn the following example, the **index.html** and **download.html** files are added to the **rawfile** folder of the application. After the application is started, a **\<Web>** component is created and the **index.html** file is loaded. After **setDownloadDelegate** is clicked, a **DownloadDelegate** object is registered with the **\<Web>** component. This **DownloadDelegate** object listens for any downloads initiated by clicking the download button on the page. 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci```ts 10e41f4b71Sopenharmony_ci// xxx.ets 11e41f4b71Sopenharmony_ciimport { webview } from '@kit.ArkWeb'; 12e41f4b71Sopenharmony_ciimport { BusinessError } from '@kit.BasicServicesKit'; 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ci@Entry 15e41f4b71Sopenharmony_ci@Component 16e41f4b71Sopenharmony_cistruct WebComponent { 17e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 18e41f4b71Sopenharmony_ci delegate: webview.WebDownloadDelegate = new webview.WebDownloadDelegate(); 19e41f4b71Sopenharmony_ci 20e41f4b71Sopenharmony_ci build() { 21e41f4b71Sopenharmony_ci Column() { 22e41f4b71Sopenharmony_ci Button('setDownloadDelegate') 23e41f4b71Sopenharmony_ci .onClick(() => { 24e41f4b71Sopenharmony_ci try { 25e41f4b71Sopenharmony_ci this.delegate.onBeforeDownload((webDownloadItem: webview.WebDownloadItem) => { 26e41f4b71Sopenharmony_ci console.log("will start a download."); 27e41f4b71Sopenharmony_ci // Pass in a download path and start the download. 28e41f4b71Sopenharmony_ci // If the path is invalid, the file will be downloaded to the default directory at /data/storage/el2/base/cache/web/. 29e41f4b71Sopenharmony_ci webDownloadItem.start("/data/storage/el2/base/cache/web/" + webDownloadItem.getSuggestedFileName()); 30e41f4b71Sopenharmony_ci }) 31e41f4b71Sopenharmony_ci this.delegate.onDownloadUpdated((webDownloadItem: webview.WebDownloadItem) => { 32e41f4b71Sopenharmony_ci // Unique ID of a download task. 33e41f4b71Sopenharmony_ci console.log("download update guid: " + webDownloadItem.getGuid()); 34e41f4b71Sopenharmony_ci // Download progress. 35e41f4b71Sopenharmony_ci console.log("download update guid: " + webDownloadItem.getPercentComplete()); 36e41f4b71Sopenharmony_ci // Current download speed. 37e41f4b71Sopenharmony_ci console.log("download update speed: " + webDownloadItem.getCurrentSpeed()) 38e41f4b71Sopenharmony_ci }) 39e41f4b71Sopenharmony_ci this.delegate.onDownloadFailed((webDownloadItem: webview.WebDownloadItem) => { 40e41f4b71Sopenharmony_ci console.log("download failed guid: " + webDownloadItem.getGuid()); 41e41f4b71Sopenharmony_ci // Error code of a download task failure. 42e41f4b71Sopenharmony_ci console.log("download failed guid: " + webDownloadItem.getLastErrorCode()); 43e41f4b71Sopenharmony_ci }) 44e41f4b71Sopenharmony_ci this.delegate.onDownloadFinish((webDownloadItem: webview.WebDownloadItem) => { 45e41f4b71Sopenharmony_ci console.log("download finish guid: " + webDownloadItem.getGuid()); 46e41f4b71Sopenharmony_ci }) 47e41f4b71Sopenharmony_ci this.controller.setDownloadDelegate(this.delegate); 48e41f4b71Sopenharmony_ci } catch (error) { 49e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 50e41f4b71Sopenharmony_ci } 51e41f4b71Sopenharmony_ci }) 52e41f4b71Sopenharmony_ci Web({ src: $rawfile('index.html'), controller: this.controller }) 53e41f4b71Sopenharmony_ci } 54e41f4b71Sopenharmony_ci } 55e41f4b71Sopenharmony_ci} 56e41f4b71Sopenharmony_ci``` 57e41f4b71Sopenharmony_ciHTML file to be loaded: 58e41f4b71Sopenharmony_ci```html 59e41f4b71Sopenharmony_ci<!-- index.html --> 60e41f4b71Sopenharmony_ci<!DOCTYPE html> 61e41f4b71Sopenharmony_ci<html> 62e41f4b71Sopenharmony_ci<body> 63e41f4b71Sopenharmony_ci<a href='data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3E' download='download.html'>Download</a> 64e41f4b71Sopenharmony_ci</body> 65e41f4b71Sopenharmony_ci</html> 66e41f4b71Sopenharmony_ci``` 67e41f4b71Sopenharmony_ci 68e41f4b71Sopenharmony_ciHTML file to be downloaded: 69e41f4b71Sopenharmony_ci```html 70e41f4b71Sopenharmony_ci<!-- download.html --> 71e41f4b71Sopenharmony_ci<!DOCTYPE html> 72e41f4b71Sopenharmony_ci<html> 73e41f4b71Sopenharmony_ci<body> 74e41f4b71Sopenharmony_ci<h1>download test</h1> 75e41f4b71Sopenharmony_ci</body> 76e41f4b71Sopenharmony_ci</html> 77e41f4b71Sopenharmony_ci``` 78e41f4b71Sopenharmony_ci 79e41f4b71Sopenharmony_ci## Initiating a Download Task 80e41f4b71Sopenharmony_ci 81e41f4b71Sopenharmony_ciCall [startDownload()](../reference/apis-arkweb/js-apis-webview.md#startdownload11) to initiate a download task. 82e41f4b71Sopenharmony_ciFor a download initiated by it, the **\<Web>** component works out the referrer based on the currently displayed URL and its own default referrer policy. 83e41f4b71Sopenharmony_ci 84e41f4b71Sopenharmony_ci In the following example, clicking **setDownloadDelegate** registers a listener class with the **\<Web>** component, and clicking **startDownload** initiates a download task. 85e41f4b71Sopenharmony_ci The application is notified of the download task progress through the configured **DownloadDelegate** object. 86e41f4b71Sopenharmony_ci 87e41f4b71Sopenharmony_ci```ts 88e41f4b71Sopenharmony_ci// xxx.ets 89e41f4b71Sopenharmony_ciimport { webview } from '@kit.ArkWeb'; 90e41f4b71Sopenharmony_ciimport { BusinessError } from '@kit.BasicServicesKit'; 91e41f4b71Sopenharmony_ci 92e41f4b71Sopenharmony_ci@Entry 93e41f4b71Sopenharmony_ci@Component 94e41f4b71Sopenharmony_cistruct WebComponent { 95e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 96e41f4b71Sopenharmony_ci delegate: webview.WebDownloadDelegate = new webview.WebDownloadDelegate(); 97e41f4b71Sopenharmony_ci 98e41f4b71Sopenharmony_ci build() { 99e41f4b71Sopenharmony_ci Column() { 100e41f4b71Sopenharmony_ci Button('setDownloadDelegate') 101e41f4b71Sopenharmony_ci .onClick(() => { 102e41f4b71Sopenharmony_ci try { 103e41f4b71Sopenharmony_ci this.delegate.onBeforeDownload((webDownloadItem: webview.WebDownloadItem) => { 104e41f4b71Sopenharmony_ci console.log("will start a download."); 105e41f4b71Sopenharmony_ci // Pass in a download path and start the download. 106e41f4b71Sopenharmony_ci webDownloadItem.start("/data/storage/el2/base/cache/web/" + webDownloadItem.getSuggestedFileName()); 107e41f4b71Sopenharmony_ci }) 108e41f4b71Sopenharmony_ci this.delegate.onDownloadUpdated((webDownloadItem: webview.WebDownloadItem) => { 109e41f4b71Sopenharmony_ci console.log("download update guid: " + webDownloadItem.getGuid()); 110e41f4b71Sopenharmony_ci }) 111e41f4b71Sopenharmony_ci this.delegate.onDownloadFailed((webDownloadItem: webview.WebDownloadItem) => { 112e41f4b71Sopenharmony_ci console.log("download failed guid: " + webDownloadItem.getGuid()); 113e41f4b71Sopenharmony_ci }) 114e41f4b71Sopenharmony_ci this.delegate.onDownloadFinish((webDownloadItem: webview.WebDownloadItem) => { 115e41f4b71Sopenharmony_ci console.log("download finish guid: " + webDownloadItem.getGuid()); 116e41f4b71Sopenharmony_ci }) 117e41f4b71Sopenharmony_ci this.controller.setDownloadDelegate(this.delegate); 118e41f4b71Sopenharmony_ci } catch (error) { 119e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 120e41f4b71Sopenharmony_ci } 121e41f4b71Sopenharmony_ci }) 122e41f4b71Sopenharmony_ci Button('startDownload') 123e41f4b71Sopenharmony_ci .onClick(() => { 124e41f4b71Sopenharmony_ci try { 125e41f4b71Sopenharmony_ci // The specified download address here is https://www.example.com/. 126e41f4b71Sopenharmony_ci // Replace it with the URL from which you want to download files. 127e41f4b71Sopenharmony_ci this.controller.startDownload('https://www.example.com/'); 128e41f4b71Sopenharmony_ci } catch (error) { 129e41f4b71Sopenharmony_ci console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 130e41f4b71Sopenharmony_ci } 131e41f4b71Sopenharmony_ci }) 132e41f4b71Sopenharmony_ci Web({ src: 'www.example.com', controller: this.controller }) 133e41f4b71Sopenharmony_ci } 134e41f4b71Sopenharmony_ci } 135e41f4b71Sopenharmony_ci} 136e41f4b71Sopenharmony_ci``` 137