使用Web组件的下载能力
监听页面触发的下载
通过setDownloadDelegate()向Web组件注册一个DownloadDelegate来监听页面触发的下载任务。资源由Web组件来下载,Web组件会通过DownloadDelegate将下载的进度通知给应用。
下面的示例中,在应用的rawfile中创建index.html以及download.html。应用启动后会创建一个Web组件并加载index.html,点击setDownloadDelegate按钮向Web组件注册一个DownloadDelegate,,点击页面里的下载按钮的时候会触发一个下载任务,在DownloadDelegate中可以监听到下载的进度。
// xxx.ets
import web_webview from '@ohos.web.webview'
import business_error from '@ohos.base'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
delegate: web_webview.WebDownloadDelegate = new web_webview.WebDownloadDelegate();
build() {
Column() {
Button('setDownloadDelegate')
.onClick(() => {
try {
this.delegate.onBeforeDownload((webDownloadItem: web_webview.WebDownloadItem) => {
console.log("will start a download.");
// 传入一个下载路径,并开始下载。
// 如果传入一个不存在的路径,则会下载到默认/data/storage/el2/base/cache/web/目录。
webDownloadItem.start("/data/storage/el2/base/cache/web/" + webDownloadItem.getSuggestedFileName());
})
this.delegate.onDownloadUpdated((webDownloadItem: web_webview.WebDownloadItem) => {
// 下载任务的唯一标识。
console.log("download update guid: " + webDownloadItem.getGuid());
// 下载的进度。
console.log("download update guid: " + webDownloadItem.getPercentComplete());
// 当前的下载速度。
console.log("download update speed: " + webDownloadItem.getCurrentSpeed())
})
this.delegate.onDownloadFailed((webDownloadItem: web_webview.WebDownloadItem) => {
console.log("download failed guid: " + webDownloadItem.getGuid());
// 下载任务失败的错误码。
console.log("download failed guid: " + webDownloadItem.getLastErrorCode());
})
this.delegate.onDownloadFinish((webDownloadItem: web_webview.WebDownloadItem) => {
console.log("download finish guid: " + webDownloadItem.getGuid());
})
this.controller.setDownloadDelegate(this.delegate);
} catch (error) {
let e:business_error.BusinessError = error as business_error.BusinessError;
console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
}
})
Web({ src: $rawfile('index.html'), controller: this.controller })
}
}
}
加载的html文件。
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<a href='data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3E' download='download.html'>下载</a>
</body>
</html>
待下载的html文件。
<!-- download.html -->
<!DOCTYPE html>
<html>
<body>
<h1>download test</h1>
</body>
</html>
使用Web组件发起一个下载任务
使用startDownload()接口发起一个下载。 Web组件发起的下载会根据当前显示的url以及Web组件默认的Referrer Policy来计算referrer。
在下面的示例中,先点击setDownloadDelegate按钮向Web注册一个监听类,然后点击startDownload主动发起了一个下载, 该下载任务也会通过设置的DownloadDelegate来通知app下载的进度。
// xxx.ets
import web_webview from '@ohos.web.webview'
import business_error from '@ohos.base'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
delegate: web_webview.WebDownloadDelegate = new web_webview.WebDownloadDelegate();
build() {
Column() {
Button('setDownloadDelegate')
.onClick(() => {
try {
this.delegate.onBeforeDownload((webDownloadItem: web_webview.WebDownloadItem) => {
console.log("will start a download.");
// 传入一个下载路径,并开始下载。
webDownloadItem.start("/data/storage/el2/base/cache/web/" + webDownloadItem.getSuggestedFileName());
})
this.delegate.onDownloadUpdated((webDownloadItem: web_webview.WebDownloadItem) => {
console.log("download update guid: " + webDownloadItem.getGuid());
})
this.delegate.onDownloadFailed((webDownloadItem: web_webview.WebDownloadItem) => {
console.log("download failed guid: " + webDownloadItem.getGuid());
})
this.delegate.onDownloadFinish((webDownloadItem: web_webview.WebDownloadItem) => {
console.log("download finish guid: " + webDownloadItem.getGuid());
})
this.controller.setDownloadDelegate(this.delegate);
} catch (error) {
let e:business_error.BusinessError = error as business_error.BusinessError;
console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
}
})
Button('startDownload')
.onClick(() => {
try {
// 这里指定下载地址为 https://www.example.com/,Web组件会发起一个下载任务将该页面下载下来。
// 开发者需要替换为自己想要下载的内容的地址。
this.controller.startDownload('https://www.example.com/');
} catch (error) {
let e:business_error.BusinessError = error as business_error.BusinessError;
console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}