angular - 如何使用 Angular 5 下载文件？

Question

当我在浏览器中粘贴 my_example_link 时，文件会以正确的方式自动下载。但是，当我使用下面显示的源代码时，下载不起作用。我想在点击 download 按钮后下载文件。任何想法出了什么问题？我没有收到任何错误。

用户服务.ts:

DownloadFiles() {

    return this.http.get('my_example_link', {responseType: 'text'});

}

uploader .service.ts:

DownloadFile(){

      this.userService.DownloadFiles()
          .subscribe(
              (data) => this.downloadFile2(data)), // console.log(data),
              (error) => console.log("Error downloading the file."),
              () => console.info("OK");
}

downloadFile2(data: Response){
  var blob = new Blob([data], { type: 'text/csv' });
  var url= window.URL.createObjectURL(blob);
  window.open(url);
}

something.component.html:

<li class="nav-item" *ngIf="isCloud()">
    <a  (click)="this.UploaderService.DownloadFile()" download="file23.txt" style='cursor: pointer;' class="nav-link" target="_blank">
        <i class="nc-icon nc-basket"></i> Download
    </a>
</li>

Answer 1

使用arraybuffer

this.httpClient.get(url, {responseType: 'arraybuffer',headers:headers});

保存文件:

 npm install file-saver --save

 import { saveAs } from 'file-saver/FileSaver';

组件:

downLoadFile(data: any, type: string) {
        var blob = new Blob([data], { type: type.toString() });
        var url = window.URL.createObjectURL(blob);
        saveAs(blob,"file_name.txt");
        window.open(url);

    }