1. 网站下载文件简介
在上一篇文章HTTP模拟客户端登录示例中，我们使用HttpRequest模拟了登录，同样，使用HttpRequest也可以下载文件，假设还是上文中提到的网站，在登录后会进入首页，在首页会显示下载列表，单击某一个文件就可以下载了，如图所示：
这里我们就模拟一下文件下载的功能，开发鸿蒙应用客户端把文件下载到本地。
2. 客户端下载示例
本示例运行后的界面如图所示：
应用启动后，首先点击“登录”按钮模拟登录，并且记录下服务端返回的cookie，然后单击“下载”按钮，发送下载请求到服务端，同时附带cookie信息，最后就可以下载指定地址的文件了。
下面详细介绍创建该应用的步骤。
步骤1：创建Empty Ability项目。
步骤2：在module.json5配置文件加上对权限的声明：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]这里添加了访问互联网的权限。
步骤3：在Index.ets文件里添加如下的代码：
import http from '@ohos.net.http';
import util from '@ohos.util';
import fs from '@ohos.file.fs';
@Entry
@Component
struct Index {
//连接、通讯历史记录
@State msgHistory: string = ''
//首页地址
@State downloadUrl: string = "http://192.168.100.102:8081/download?filename=demo.txt"
//登录地址
@State loginUrl: string = "http://192.168.100.102:8081/auth"
//用户名
@State loginName: string = "zhanglei"
//密码
@State passwd: string = "cangjie"
scroller: Scroller = new Scroller()
sessionId: string = ""
build() {
Row() {
Column() {
Text("模拟登录示例")
.fontSize(14)
.fontWeight(FontWeight.Bold)
.width('100%')
.textAlign(TextAlign.Center)
.padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text("用户名：")
.fontSize(14)
.width(80)
.flexGrow(0)
TextInput({ text: this.loginName })
.onChange((value) => {
this.loginName = value
})
.width(110)
.fontSize(11)
.flexGrow(1)
Text("密码：")
.fontSize(14)
.width(60)
.flexGrow(0)
TextInput({ text: this.passwd })
.onChange((value) => {
this.passwd = value
})
.type(InputType.Password)
.width(100)
.fontSize(11)
.flexGrow(1)
}
.width('100%')
.padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text("登录地址：")
.fontSize(14)
.width(80)
.flexGrow(0)
TextInput({ text: this.loginUrl })
.onChange((value) => {
this.loginUrl = value
})
.width(100)
.fontSize(11)
.flexGrow(1)
Button("登录")
.onClick(() => {
this.login()
})
.width(70)
.fontSize(14)
.flexGrow(0)
}
.width('100%')
.padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text("文件地址：")
.fontSize(14)
.width(80)
.flexGrow(0)
TextInput({ text: this.downloadUrl })
.onChange((value) => {
this.downloadUrl = value
})
.width(110)
.fontSize(11)
.flexGrow(1)
Button("下载")
.onClick(() => {
this.downloadFile()
})
.width(70)
.fontSize(14)
.flexGrow(0)
}
.width('100%')
.padding(10)
Scroll(this.scroller) {
Text(this.msgHistory)
.textAlign(TextAlign.Start)
.padding(10)
.width('100%')
.backgroundColor(0xeeeeee)
}
.align(Alignment.Top)
.backgroundColor(0xeeeeee)
.height(300)
.flexGrow(1)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarWidth(20)
}
.width('100%')
.justifyContent(FlexAlign.Start)
.height('100%')
}
.height('100%')
}
//下载文件
downloadFile() {
//http请求对象
let httpRequest = http.createHttp();
let opt: http.HttpRequestOptions = {
method: http.RequestMethod.GET,
header: { 'Accept-Encoding': 'gzip, deflate, br',
'Accept-Language': 'zh-CN,zh;q=0.9',
//这一步很关键，把登录成功后的cookie传递过去
'Cookie': 'sessionid=' + this.sessionId,
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
},
expectDataType: http.HttpDataType.ARRAY_BUFFER
}
httpRequest.request(this.downloadUrl, opt)
.then((resp) => {
this.msgHistory += "响应码：" + resp.responseCode + "\r\n"
//响应首部中要下载的文件信息，格式为：
// content-disposition: attachment; filename="demo.txt"
let respDisp: string = resp.header["content-disposition"]
//从文件信息提取文件名称，这里包含双引号
let fileNameWithQuote = respDisp.split(";")[1].split("=")[1]
//去掉文件名称的双引号
let fileName = fileNameWithQuote.substring(1, fileNameWithQuote.length - 2)
//保存文件到本地
let filePath = this.saveFile(resp.result as ArrayBuffer, fileName)
//读取文件内容并显示
this.showFileContent(filePath)
})
.catch((e) => {
this.msgHistory += "请求失败：" + e.message + "\r\n"
})
}
//保存文件并返回保存路径
saveFile(buf: ArrayBuffer, fileName: string): string {
let pathDir = getContext(this).filesDir;
let filePath = pathDir + "/" + fileName;
let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
fs.writeSync(file.fd, buf);
this.msgHistory += "文件已保存到：" + filePath + "\r\n"
fs.closeSync(file);
return filePath
}
//显示指定文件的内容
showFileContent(filePath: string) {
// let file = fs.openSync(filePath, fs.OpenMode.READ_ONLY);
let content = fs.readTextSync(filePath)
this.msgHistory += "文件内容：" + content + "\r\n"
}
//模拟登录
login() {
//http请求对象
let httpRequest = http.createHttp();
//请求的登录名和密码参数
let params = "username=" + this.loginName + "&password=" + this.passwd
let opt: http.HttpRequestOptions = {
method: http.RequestMethod.POST,
extraData: params,
header: { 'Content-Type': 'application/x-www-form-urlencoded' },
expectDataType: http.HttpDataType.STRING
}
httpRequest.request(this.loginUrl, opt)
.then((resp) => {
this.msgHistory += "响应码：" + resp.responseCode + "\r\n"
//返回的首部信息中，cookie的格式为：
// set-cookie: sessionid=19837d50s270ms999us100ns; Max-Age=1800; Path=/
//这里需要记录下sessionid，作为下次提交时的cookie信息
let cookies: string = resp.header["set-cookie"]
this.sessionId = cookies.split(";")[0].split("=")[1]
this.msgHistory += "sessionId：" + this.sessionId + "\r\n"
this.msgHistory += resp.result + "\r\n"
})
.catch((e) => {
this.msgHistory += "请求失败：" + e.message + "\r\n"
})
}
}步骤4：编译运行，可以使用模拟器或者真机。
步骤5：配置网站首页地址和登录地址，然后单击“登录”按钮，就可以模拟登录了，页面和上一篇文章类似就不单独截图了。
步骤5：单击“下载”按钮，应用会下载文件并保存到本地，然后从本地读取文件的内容（假设文件是文本类型的），如图所示：
可以看到，文件成功保存到了本地并读取到了文件的内容。
3. 下载功能分析
要实现下载功能，关键点在如下方面：
首先，因为下载功能要求用户已经登录，所以必须把cookie信息传递给服务端，这里判断用户是否登录是通过cookie中的sessionId实现的，具体在login方法里通过如下的代码获取到了服务端响应首部的sessonid的值信息：
//返回的首部信息中，cookie的格式为：
// set-cookie: sessionid=19837d50s270ms999us100ns; Max-Age=1800; Path=/
//这里需要记录下sessionid，作为下次提交时的cookie信息
let cookies: string = resp.header["set-cookie"]
this.sessionId = cookies.split(";")[0].split("=")[1]其次，要保证在发送下载请求时包含对应的cookie信息，这里是在downloadFile方法里实现的：
let httpRequest = http.createHttp();
let opt: http.HttpRequestOptions = {
method: http.RequestMethod.GET,
header: { 'Accept-Encoding': 'gzip, deflate, br',
'Accept-Language': 'zh-CN,zh;q=0.9',
//这一步很关键，把登录成功后的cookie传递过去
'Cookie': 'sessionid=' + this.sessionId,
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
},
expectDataType: http.HttpDataType.ARRAY_BUFFER
}
httpRequest.request(this.downloadUrl, opt)最后，是从服务端的返回信息里获取要下载的文件内容，并保存到本地，这是通过如下的代码实现的：
httpRequest.request(this.downloadUrl, opt)
.then((resp) => {
this.msgHistory += "响应码：" + resp.responseCode + "\r\n"
//响应首部中要下载的文件信息，格式为：
// content-disposition: attachment; filename="demo.txt"
let respDisp: string = resp.header["content-disposition"]
//从文件信息提取文件名称，这里包含双引号
let fileNameWithQuote = respDisp.split(";")[1].split("=")[1]
//去掉文件名称的双引号
let fileName = fileNameWithQuote.substring(1, fileNameWithQuote.length - 2)
//保存文件到本地
let filePath = this.saveFile(resp.result as ArrayBuffer, fileName)
//读取文件内容并显示
this.showFileContent(filePath)
})
.catch((e) => {
this.msgHistory += "请求失败：" + e.message + "\r\n"
})这里要注意的是获取下载文件名称的方式。
最后
小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。
为了确保高效学习，建议规划清晰的学习路线，涵盖以下关键阶段：
鸿蒙（HarmonyOS NEXT）最新学习路线
该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案
路线图适合人群：
IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术
2.视频学习资料+学习PDF文档
HarmonyOS Next 最新全套视频教程
纯血版鸿蒙全套学习资料（面试、文档、全套视频等）
总结
参与鸿蒙开发，你要先认清适合你的方向，如果是想从事鸿蒙应用开发方向的话，可以参考本文的学习路径，简单来说就是：为了确保高效学习，建议规划清晰的学习路线
扫一扫
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
