如何使用Angular 5下载文件?

the*_*ogh 3 html html5 typescript angular angular5

当我粘贴my_example_link到浏览器中时,文件会以适当的方式自动下载。但是,当我使用下面显示的源代码时,下载不起作用。单击download按钮后,我想下载文件。任何想法有什么问题吗?我没有任何错误。

user.service.ts:

DownloadFiles() {

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

}
Run Code Online (Sandbox Code Playgroud)

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);
}
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

Unl*_*yAj 6

使用数组缓冲区

this.httpClient.get(url, {responseType: 'arraybuffer',headers:headers});
Run Code Online (Sandbox Code Playgroud)

要保存文件:

 npm install file-saver --save

 import { saveAs } from 'file-saver/FileSaver';
Run Code Online (Sandbox Code Playgroud)

零件:

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);

    }
Run Code Online (Sandbox Code Playgroud)

  • 如果有人遇到错误“找不到模块'file-saver / FileSaver'”,则FileSaver位于file-saver的dist文件夹中。因此,路径将为“从'file-saver / dist / FileSaver'导入{saveAs}” (3认同)