鸿蒙网络编程系列38-Web组件文件下载示例
1. web组件文件下载能力简介
在本系列的第22篇文章,介绍了web组件的文件上传能力,同样的,web组件也具备文件下载能力,鸿蒙API提供了处理web组件下载事件的委托类型WebDownloadDelegate,该类型包括四个下载事件的回调接口:
class WebDownloadDelegate {
//下载开始前通知用户,用户需要在此接口中调用WebDownloadItem.start提供下载路径
onBeforeDownload(callback: Callback<WebDownloadItem>): void//下载过程中的回调
onDownloadUpdated(callback: Callback<WebDownloadItem>): void//下载完成后的回调
onDownloadFinish(callback: Callback<WebDownloadItem>): void//下载失败时的回调
onDownloadFailed(callback: Callback<WebDownloadItem>): void
}
web组件的控制器类WebviewController提供了设置web组件下载事件委托的方法setDownloadDelegate:
setDownloadDelegate(delegate: WebDownloadDelegate): void
web组件在下载状态变化时会自动调用委托中的对应回调函数。
本文将通过一个示例演示web组件的下载能力,通过进度条展示下载进度的变化。
2. web组件文件下载演示
本示例运行后的界面如图所示:

输入要浏览的网页地址,然后单击“加载”按钮加载网页,加载成功后单击要下载文件的超链接即可开始下载,如图所示:

这里我们下载的是哔哩哔哩网站的安卓版客户端,在应用的下载展示了下载的位置和当前的进度以及下载速度。下载完毕的界面如图所示:

这样就完成了web组件的下载功能演示。
3. web组件文件下载示例编写
下面详细介绍创建该示例的步骤。
步骤1:创建Empty Ability项目。
步骤2:在module.json5配置文件加上对权限的声明:
"requestPermissions": [{"name": "ohos.permission.INTERNET"}]
这里添加了访问互联网的权限。
步骤3:在Index.ets文件里添加如下的代码:
import webview from '@ohos.web.webview';
import web_webview from '@ohos.web.webview'@Entry
@Component
struct Index {@State title: string = "Web组件文件下载示例"//下载状态@State downloadState: string = ""//当前下载速度@State downloadSpeed: string = ""//下载文件保存位置@State downloadPath: string = ""//下载进度@State downloadProgress: number = 0//要加载的网址@State webUrl: string = "https://app.bilibili.com/"scroller: Scroller = new Scroller()controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Row() {Column() {Text(this.title).fontSize(14).fontWeight(FontWeight.Bold).width('100%').textAlign(TextAlign.Center).padding(10)Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {Text("网址:").fontSize(14).width(50).flexGrow(0)TextInput({ text: this.webUrl }).onChange((value) => {this.webUrl = value}).width(110).fontSize(11).flexGrow(1)Button("加载").onClick(() => {this.controller.loadUrl(this.webUrl);this.controller.setDownloadDelegate(this.buildDownloadDelegate())}).width(60).fontSize(14).flexGrow(0)}.width('100%').padding(5)Scroll(this.scroller) {Web({ src: "", controller: this.controller }).padding(10).width('100%').textZoomRatio(150).backgroundColor(0xeeeeee)}.align(Alignment.Top).backgroundColor(0xeeeeee).height(300).flexGrow(1).scrollable(ScrollDirection.Vertical).scrollBar(BarState.On).scrollBarWidth(20)Progress({ total: 100, type: ProgressType.Linear, value: this.downloadProgress })Text(this.downloadPath).fontSize(11).width('100%').padding(5)Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {Text(this.downloadState).fontSize(11)Divider().vertical(true).height(15).width(10)Text(this.downloadSpeed).fontSize(11)}.width('100%').padding(5)}.width('100%').justifyContent(FlexAlign.Start).height('100%')}.height('100%')}//创建web组件下载状态回调的委托buildDownloadDelegate() {let downloadDelegate: webview.WebDownloadDelegate = new webview.WebDownloadDelegate();//下载前的回调downloadDelegate.onBeforeDownload((webDownloadItem: webview.WebDownloadItem) => {//下载文件保存位置let localFilePath = getContext(this).cacheDir + "/" + webDownloadItem.getSuggestedFileName()webDownloadItem.start(localFilePath);this.downloadState = "开始下载"this.downloadPath = `保存位置:${localFilePath}`})//下载过程中的通知downloadDelegate.onDownloadUpdated((webDownloadItem: webview.WebDownloadItem) => {this.downloadState = "正在下载"this.downloadProgress = webDownloadItem.getPercentComplete()this.downloadSpeed = `当前下载速度:${webDownloadItem.getCurrentSpeed()}比特/秒`})//下载失败的通知downloadDelegate.onDownloadFailed(() => {this.downloadState = `下载失败`})//下载完成的通知downloadDelegate.onDownloadFinish(() => {this.downloadState = "下载完成"})return downloadDelegate}
}
步骤4:编译运行,可以使用模拟器或者真机。
步骤5:按照本节第2部分“web组件文件下载演示”操作即可。
4. 代码分析
本示例关键点在于构造web组件的下载委托,通过委托的onBeforeDownload回调设置下载文件的保存位置,并通过webDownloadItem的start方法开始下载。
downloadDelegate.onBeforeDownload((webDownloadItem: webview.WebDownloadItem) => {//下载文件保存位置let localFilePath = getContext(this).cacheDir + "/" + webDownloadItem.getSuggestedFileName()webDownloadItem.start(localFilePath);this.downloadState = "开始下载"this.downloadPath = `保存位置:${localFilePath}`})
(本文作者原创,除非明确授权禁止转载)
本文源码地址:
https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/web/DownloadInWeb
本系列源码地址:
https://gitee.com/zl3624/harmonyos_network_samples
相关文章:
鸿蒙网络编程系列38-Web组件文件下载示例
1. web组件文件下载能力简介 在本系列的第22篇文章,介绍了web组件的文件上传能力,同样的,web组件也具备文件下载能力,鸿蒙API提供了处理web组件下载事件的委托类型WebDownloadDelegate,该类型包括四个下载事件的回调接…...
Cisco Packet Tracer 8.0 路由器的基本配置和Telnet设置
文章目录 构建拓扑图配置IP地址配置路由器命令说明测试效果 构建拓扑图 1,添加2811路由器。 2,添加pc0。 3,使用交叉线连接路由器和pc(注意线路端口)。 4,使用配置线连接路由器和pc(注意线路…...
Flink系列之:学习理解通过状态快照实现容错
Flink系列之:学习理解通过状态快照实现容错 状态后端检查点存储状态快照状态快照如何工作?确保精确一次(exactly once)端到端精确一次 状态后端 由 Flink 管理的 keyed state 是一种分片的键/值存储,每个 keyed state…...
Linux 读者写者模型
1.背景概念 在编写多线程的时候,有一种情况是十分常见的。那就是,有些公共数据修改的机会比较少。相比较改写,它们读的机会反而高的多。这样就衍生出了读者写者模型,在这个模型中,有两类线程:读者和写者。读…...
JavaScript 的 axios 实现文件下载功能
用 JavaScript 的 axios 实现文件下载功能,咱们要分几个步骤来搞定它!最主要的部分是处理 二进制数据,可以生成一个进度检测,然后把它保存为文件。 文件名的获取二进制数据获取创建下载链接 const axios require(axios);const g…...
合合信息亮相2024中国模式识别与计算机视觉大会,用AI构建图像内容安全防线
近日,第七届中国模式识别与计算机视觉大会(简称“PRCV 2024”)在乌鲁木齐举办。大会由中国自动化学会(CAA)、中国图象图形学学会(CSIG)、中国人工智能学会(CAAI)和中国计…...
深度学习:匿名函数lambda函数的使用与numerical_gradient函数
背景: 假设我们有一个简单的线性回归模型,其损失函数是均方误差(MSE): class LinearModel:def __init__(self):self.W np.random.randn(1, 1) # 初始化权重def predict(self, x):return np.dot(x, self.W) # 线性预…...
PHP数据类型
几种常用的数据类型: String(字符串) Integer(整型) Float(浮点型) Boolean(布尔型) NULL(空值) Array(数组) Obje…...
2FA-双因素认证
双因素认证(2FA,Two-Factor Authentication)是一种提高安全性的方法,要求用户在登录或进行某些敏感操作时提供两种不同类型的身份验证信息。这种方法通过引入第二层验证,增加了账户被未经授权访问的难度。 项目结构 …...
解决 Python 中的 TypeError 错误
解决 Python 中的 TypeError 错误 在 Python 编程中,TypeError 是一种常见的错误,通常发生在尝试对不兼容的类型进行操作时。了解这个错误的原因以及如何有效解决它,对于提高代码的可靠性和可读性至关重要。本文将详细讨论 TypeError 的成因…...
快速学会C 语言基本概念和语法结构
😀前言 本篇博文是关于C 语言的基本概念和语法结构,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的满意是我的动力&a…...
Python酷库之旅-第三方库Pandas(172)
目录 一、用法精讲 791、pandas.UInt8Dtype类 791-1、语法 791-2、参数 791-3、功能 791-4、返回值 791-5、说明 791-6、用法 791-6-1、数据准备 791-6-2、代码示例 791-6-3、结果输出 792、pandas.UInt16Dtype类 792-1、语法 792-2、参数 792-3、功能 792-4、…...
Linux系统下minio设置SSL证书进行HTTPS远程连接访问
文章目录 1.配置SSL证书使用HTTPS访问2.MINIO SDK 忽略证书验证3.使用受信任的证书 1.配置SSL证书使用HTTPS访问 生成域名对应的SSL证书,下载Apache版本,我目前只发现Apache这个里面有对应的私钥和证书 私钥重命名为private.key证书重命名为public.crt&…...
npm 包的命名空间介绍,以及@typescript-eslint/typescript-eslint
npm 包的命名空间是一个重要的概念,用于组织和管理相关的包。通过命名空间,开发者可以避免命名冲突、增强包的可读性和可维护性。以下是关于 npm 命名空间的详细介绍,并以 typescript-eslint 作为示例。 1. 命名空间的结构 命名空间的格式为…...
ecovadis评估是什么,有什么提成自己评分等级
EcoVadis评估是一个企业社会责任(CSR)评级平台,旨在评估全球供应链的可持续性和道德情况。以下是对EcoVadis评估的详细介绍以及提升其评分等级的方法: 一、EcoVadis评估概述 定义:EcoVadis评估通过一系列框架评估公司…...
Vue3中ref、toRef和toRefs之间有什么区别?
前言 Vue 3 引入了组合式 API,其中 ref、toRef 和 toRefs 是处理响应式数据的核心工具。作为高级计算机工程师,我们有必要深入理解这些工具的细微差别,以便在实际项目中更加高效地管理状态。本文将详细解析 ref、toRef 和 toRefs 的区别&…...
react开发技巧
/* eslint-disable no-useless-escape */ const Validator { isEmail: /^([a-zA-Z0-9_\.\-])\(([a-zA-Z0-9\-])\.)([a-zA-Z0-9]{2,4})$/, // 校验邮箱 isPhoneNumber: /^1[3456789]\d{9}$/, // 手机号码验证 isMobileNumber: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/, //…...
HarmonyOS第一课——HarmonyOS介绍
HarmonyOS第一课 HarmonyOS介绍 HarmonyOS是新一代的智能终端操作系统(泛终端服务的载体); 智慧互联协同,全场景交互体验; 核心技术理念: 一次开发 多次部署: 预览 可视化开发UI适配 事件交…...
XCode16中c++头文件找不到解决办法
XCode16中新建Framework,写完自己的c代码后,提示“<string> file not found”等诸如此类找不到c头文件的错误。 工程结构如下: App是测试应用,BoostMath是Framework。基本结构可以参考官方demo:Mix Swift and …...
CSS - 保姆级面试基础扫盲版本一
盒子模型 盒子模型定义: 当对一个盒子模型进行文档布局的时候,浏览器的渲染引擎会根据标准之一的CSS盒子模型(CSS basic box model),将所有元素表示成一个个矩阵盒子。 一个盒子通常由四部分组成:border p…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天,数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具,在大规模数据获取中发挥着关键作用。然而,传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时,常出现数据质…...
RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
C#学习第29天:表达式树(Expression Trees)
目录 什么是表达式树? 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持: 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...
(一)单例模式
一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...
android RelativeLayout布局
<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...
