在我的 Angular 应用程序中使用 S3 预签名 url 下载多个文件

Question

我正在调用 REST API 以从 S3 获取一组预签名的 URL。 这些 URL 是可以是 XML、CSV、JSON 等的文件。

如何在不打开新标签的情况下从这些 URL 循环下载文件？ 我不想使用 AWS SDK for NodeJS 来避免与我的前端紧密耦合。 应用程序目前有 Angular 7、NodeJS 和 ExpressJS。

getFile(url, params){
this.awsservice.getFile(url, params).subscribe(
  (response) => {
    const res = JSON.parse(JSON.stringify(response));
    var apiList = [];

    for (var key in res) {
      if(key == 'api'){
        apiList = res[key];
      }
    }

    apiList.forEach(function (url) {

  // Logic to download file
  document.location.assign(url) //Only seems to download the last file in the array
      console.log("Download started: "+url);
  });

  },
  (error) => {
    this.tempErrorFlag = true;
    const errorMsg = error;
    console.log(`ERROR ::: reInitiate API ::: ${errorMsg.message}`);
  });
}

我尝试添加document.location.assign(url)但它似乎只下载了数组中的最后一个 url。 即使增加delay也无济于事。

感谢你的帮助。

Answer 1

我能够下载文件，但不能在同一个选项卡中。 首先，我从我的 Angular 服务中获取预签名的 URL，并将其输入到一个数组中。 然后基本上使用每个预签名的 url，我创建一个临时锚标记并分配 href 预签名的 url 值。 snapbarService 用于在下载开始时显示一个弹出窗口。 整个代码如下所示：

  downloadItem() {
  let urls = [];
  for(let item of this.selectedRowsData) {
  //calling the service to fetch the presigned url
  this.dataService.getPresignedToDownloadAll(
    item.value,
    item.id).subscribe((res) => {
      urls.push(res);
      this.download(urls);
   });
 }
}

download(urls: any) {
  var self = this;
  var url = urls.pop();
  setTimeout(function(){
    self.snackBarService.loadComponent({
      isSuccess: true,
      message: MESSAGES.downloadInProgress,
    });
  var a = document.createElement('a');
  a.setAttribute('href', url);
  document.body.appendChild(a);
  a.setAttribute('download', '');
  a.setAttribute('target', '_blank');
  a.click();
 // a.remove();
 }, 1000)
}