1. 网站下载文件简介
在上一篇文章鸿蒙网络编程系列9-使用HttpRequest模拟登录示例中，我们使用 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@Componentstruct 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" })
复制代码
这里要注意的是获取下载文件名称的方式。
（本文作者原创，除非明确授权禁止转载）
本文源码地址：
https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/http/HttpRequestDownload
本系列源码地址：
https://gitee.com/zl3624/harmonyos_network_samples
评论