首页 > 解决方案 > 在Angular 5中通过blob下载时设置文件名

问题描述

下面是我从 API 下载文件的 Typescript 代码

DownloadLM() {
var ID= sessionStorage.getItem("UserID");
    return this.http.get(this.baseurl + 'api/DownloadFiles/DownloadLM/' + ID,
      {
        headers: {
          'Content-Type': 'application/json'
        },
        responseType: 'arraybuffer'
      }
    )
      .subscribe(respData => {
        this.downLoad(respData, this.type);
      }, error => {
      });
  }

  downLoad(data: any, type: string) {
    var blob = new Blob([data], { type: type.toString() });
    var url = window.URL.createObjectURL(blob);
    var pwa = window.open(url);
    if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
      alert('Please disable your Pop-up blocker and try again.');
    }
  }

这很好下载 Excel 文件,但它给了我不想要的文件的随机名称,我想在下载时设置我选择的文件名,

我在哪里可以设置文件名?Blob 的任何属性?

标签: angularazureangular5blob

解决方案


您可以将下载属性设置为您想要的文件名,将href设置为对象url,然后只需调用click

var blob = new Blob([data], { type: type.toString() });
var url = window.URL.createObjectURL(blob);
var anchor = document.createElement("a");
anchor.download = "myfile.txt";
anchor.href = url;
anchor.click();

推荐阅读