• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用Web组件的下载能力
2
3## 监听页面触发的下载
4
5通过[setDownloadDelegate()](../reference/apis-arkweb/js-apis-webview.md#setdownloaddelegate11)向Web组件注册一个DownloadDelegate来监听页面触发的下载任务。资源由Web组件来下载，Web组件会通过DownloadDelegate将下载的进度通知给应用。
6
7下面的示例中，在应用的rawfile中创建index.html以及download.html。应用启动后会创建一个Web组件并加载index.html，点击setDownloadDelegate按钮向Web组件注册一个DownloadDelegate,，点击页面里的下载按钮的时候会触发一个下载任务，在DownloadDelegate中可以监听到下载的进度。
8
9```ts
10// xxx.ets
11import web_webview from '@ohos.web.webview'
12import business_error from '@ohos.base'
13
14@Entry
15@Component
16struct WebComponent {
17  controller: web_webview.WebviewController = new web_webview.WebviewController();
18  delegate: web_webview.WebDownloadDelegate = new web_webview.WebDownloadDelegate();
19
20  build() {
21    Column() {
22      Button('setDownloadDelegate')
23        .onClick(() => {
24          try {
25            this.delegate.onBeforeDownload((webDownloadItem: web_webview.WebDownloadItem) => {
26              console.log("will start a download.");
27              // 传入一个下载路径，并开始下载。
28              // 如果传入一个不存在的路径，则会下载到默认/data/storage/el2/base/cache/web/目录。
29              webDownloadItem.start("/data/storage/el2/base/cache/web/" + webDownloadItem.getSuggestedFileName());
30            })
31            this.delegate.onDownloadUpdated((webDownloadItem: web_webview.WebDownloadItem) => {
32              // 下载任务的唯一标识。
33              console.log("download update guid: " + webDownloadItem.getGuid());
34              // 下载的进度。
35              console.log("download update guid: " + webDownloadItem.getPercentComplete());
36              // 当前的下载速度。
37              console.log("download update speed: " + webDownloadItem.getCurrentSpeed())
38            })
39            this.delegate.onDownloadFailed((webDownloadItem: web_webview.WebDownloadItem) => {
40              console.log("download failed guid: " + webDownloadItem.getGuid());
41              // 下载任务失败的错误码。
42              console.log("download failed guid: " + webDownloadItem.getLastErrorCode());
43            })
44            this.delegate.onDownloadFinish((webDownloadItem: web_webview.WebDownloadItem) => {
45              console.log("download finish guid: " + webDownloadItem.getGuid());
46            })
47            this.controller.setDownloadDelegate(this.delegate);
48          } catch (error) {
49            let e:business_error.BusinessError = error as business_error.BusinessError;
50            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
51          }
52        })
53      Web({ src: $rawfile('index.html'), controller: this.controller })
54    }
55  }
56}
57```
58加载的html文件。
59```html
60<!-- index.html -->
61<!DOCTYPE html>
62<html>
63<body>
64<a href='./download.html' download='download.html'>下载</a>
65</body>
66</html>
67```
68
69待下载的html文件。
70```html
71<!-- download.html -->
72<!DOCTYPE html>
73<html>
74<body>
75<h1>download test</h1>
76</body>
77</html>
78```
79
80## 使用Web组件发起一个下载任务
81
82使用[startDownload()](../reference/apis-arkweb/js-apis-webview.md#startdownload11)接口发起一个下载。
83Web组件发起的下载会根据当前显示的url以及Web组件默认的Referrer Policy来计算referrer。
84
85  在下面的示例中，先点击setDownloadDelegate按钮向Web注册一个监听类，然后点击startDownload主动发起了一个下载，
86  该下载任务也会通过设置的DownloadDelegate来通知app下载的进度。
87
88```ts
89// xxx.ets
90import web_webview from '@ohos.web.webview'
91import business_error from '@ohos.base'
92
93@Entry
94@Component
95struct WebComponent {
96  controller: web_webview.WebviewController = new web_webview.WebviewController();
97  delegate: web_webview.WebDownloadDelegate = new web_webview.WebDownloadDelegate();
98
99  build() {
100    Column() {
101      Button('setDownloadDelegate')
102        .onClick(() => {
103          try {
104            this.delegate.onBeforeDownload((webDownloadItem: web_webview.WebDownloadItem) => {
105              console.log("will start a download.");
106              // 传入一个下载路径，并开始下载。
107              webDownloadItem.start("/data/storage/el2/base/cache/web/" + webDownloadItem.getSuggestedFileName());
108            })
109            this.delegate.onDownloadUpdated((webDownloadItem: web_webview.WebDownloadItem) => {
110              console.log("download update guid: " + webDownloadItem.getGuid());
111            })
112            this.delegate.onDownloadFailed((webDownloadItem: web_webview.WebDownloadItem) => {
113              console.log("download failed guid: " + webDownloadItem.getGuid());
114            })
115            this.delegate.onDownloadFinish((webDownloadItem: web_webview.WebDownloadItem) => {
116              console.log("download finish guid: " + webDownloadItem.getGuid());
117            })
118            this.controller.setDownloadDelegate(this.delegate);
119          } catch (error) {
120            let e:business_error.BusinessError = error as business_error.BusinessError;
121            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
122          }
123        })
124      Button('startDownload')
125        .onClick(() => {
126          try {
127            // 这里指定下载地址为 https://www.example.com/，Web组件会发起一个下载任务将该页面下载下来。
128            // 开发者需要替换为自己想要下载的内容的地址。
129            this.controller.startDownload('https://www.example.com/');
130          } catch (error) {
131            let e:business_error.BusinessError = error as business_error.BusinessError;
132            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
133          }
134        })
135      Web({ src: 'www.example.com', controller: this.controller })
136    }
137  }
138}
139```