Angular 8 使用 auth 获取 txt 文件 header

Question

我正在尝试实现下载 link 供用户下载 .txt 文件中的记录。

首先是一个简单的 <a> 标签

<a href="http://localhost:8080/service/api/downloadFile?fileType=daily&trsDate=20190918">download</a>

我可以从服务器下载 .txt 格式的文件。但是我发现它并没有带Authheader。所以我尝试使用http get方法来获取它。

service.js

  getCdrFile(url) {
    return this.http.get<any>(`${this.env.service}/service/api/downloadFile?` + url);
  }

component.js

downloadFile(url) {
    this.service.getCdrFile(url).subscribe(
      data => {
        console.log(data);
      },
      error => {
        console.log(error);
      }
    );
  }

我可以用 auth head 成功调用 API，然后我点击下载按钮后没有任何反应，但在 Chrome 开发人员的 "response" 选项卡中显示了 txt 数据工具。另外，我的 http 请求中 console.log(data); 什么也没有得到。

有什么文件可以下载吗？谢谢！

（这是我的回复详情）

# GENERAL
Request URL: http://localhost:8080/service/api/downloadFile?fileType=daily&trsDate=20190918
Request Method: GET
Status Code: 200 
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade

# RESPONSE HEADER
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Disposition: attachment; filename=20190918.txt
Content-Type: application/json
Date: Wed, 02 Oct 2019 03:51:01 GMT
Expires: 0
Pragma: no-cache
Server: nginx/1.15.2
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

Answer 1

您有两种方式从服务器下载文件。

1:-) 从 HTTP 调用获得响应以创建 base64 并创建虚拟锚标记并下载。

2:-) 将后端响应修改为下载响应。

Answer 2

您可以创建一个 Blob 响应并使用它创建一个 Blob url 并即时下载。

服务：

修改您的服务以接收 blob 响应

getImage() {
  return this.httpClient.get(
    your_image_link, 
    {
      responseType: 'blob', // <-- add this
      headers: {your_headers}
    }
  );
}

组件：

点击页面上的 link 调用您的服务以获取文件的响应 blob
创建 blob url URL.createObjectUrl 方法
创建一个虚拟锚元素分配 blob url 和要下载的文件的名称
在锚元素上触发点击事件
使用 URL.revokeObjectUrl 方法

downloadImage() {
  this.service.getImage().subscribe(img => {
    const url = URL.createObjectURL(img);
    const a = document.createElement('a');
    a.download = "filename.txt";
    a.href = url;
    a.click();
    URL.revokeObjectURL(url);
  });
}

Stackblitz：https://stackblitz.com/edit/angular-kp3saz

Angular 8 使用 auth 获取 txt 文件 header

Angular 8 get txt file with auth header

ajax

http

get-request

angular