1. 网站下载文件简介

在上一篇文章鸿蒙网络编程系列9-使用HttpRequest模拟登录示例中,我们使用HttpRequest模拟了登录,同样,使用HttpRequest也可以下载文件,假设还是上文中提到的网站,在登录后会进入首页,在首页会显示下载列表,单击某一个文件就可以下载了,如图所示:

2.jpg

这里我们就模拟一下文件下载的功能,开发鸿蒙应用客户端把文件下载到本地。

2. 客户端下载示例

本示例运行后的界面如图所示:

cke_19014.jpeg

应用启动后,首先点击“登录”按钮模拟登录,并且记录下服务端返回的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:单击“下载”按钮,应用会下载文件并保存到本地,然后从本地读取文件的内容(假设文件是文本类型的),如图所示:

cke_167778.jpeg

可以看到,文件成功保存到了本地并读取到了文件的内容。

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/maste...

本系列源码地址:

https://gitee.com/zl3624/harmonyos_network_samples


长弓三石
1 声望0 粉丝