如何在Angular 2 TypeScript中下载文件

Question

我希望下载一个由 API 服务创建的 php7 文件。当我从 API 服务接收到服务输出时，该文件无法下载。但是，如果我在浏览器的开发者工具中查看服务输出，它是正确的。我的应用程序出了什么问题？

为了在 Angular 中获取 API 服务，我使用 Angular 2 的 HttpClient 和 get 方法。在订阅 http 服务结果后，结果不为空，但没有下载文件。如何在 Angular 2 中使用流下载？

downloadAttachment(filename: string){
   return this.http.get( this.url +"/"+ filename)
            .catch(this.handleError);
}

- k m

Answer 1

您可以使用npm中存在的FileSave包：

npm install --save file-saver
..
import { saveAs } from 'file-saver/FileSaver';

在您的subscribe方法中获取结果后，可以按照以下方式使用：

saveAs(result, filename);

- hamid_reza hobab

Answer 2

如果它是一个Blob响应，你需要做类似这样的事情：

 const header = {responseType: 'blob', observe: 'response'};
 this.http.get( this.url +"/"+ filename, headers)
          .map(res => ({content: res.body, fileName: res.headers.get('content-filename')}));

然后您可以使用文件保存器将blob转换为可下载文件。

- sabithpocker

---

谢谢，但responseType是HttpOption的属性，而不是HttpHeader的属性。 - k m

Answer 3

    let headers = new Headers({ name: "X-Requested-With", value: "XMLHttpRequest" });
    let url = `https://api.cloudinary.com/v1_1/${cloudinary_config.cloud_name}/image/upload`;
    let form: FormData = new FormData();
    form.append("upload_preset", cloudinary_config.upload_preset);
    form.append("context", `photo=${this.title}`);
    form.append("folder", window.location.hostname);
    form.append("tags", "myphotoalbum");
    form.append("file", file);

    this.http.post(url, form).subscribe(
      (data: any) => {
        console.log("sonuc", data);
        this.success(data.toString());
        this.imageUrl.emit(JSON.stringify(data));
      },
      error => {
        this.warn("hata oluştu");
      },
      () => { // "sonuc"
      }

    );

- zinderud