如何使用 Observables 和 Blob 在 Angular2 中下載檔案？

Angular2 如何處理檔案下載

在 Angular2 及更高版本中，下載檔案涉及使用 Observables 和 Blob 來擷取和保存資料。讓我們探討 Angular 應用程式下載檔案的特定場景。

理解問題

使用者在 Angular2 用戶端中實作檔案下載功能時遇到問題WebApi/MVC 應用程式。他們正確設定了請求，但很難理解 Angular 如何管理文件保存。

解決方案

問題的出現​​是因為處理文件下載的 Observable 運行在一個單獨的上下文中。這會導致將空物件傳遞到 URL 變數中，而不是所需的 blob。

為了解決這個問題，解決方案涉及以將資料作為回應直接傳遞給指定函數的方式訂閱Observable ，如：

this._reportService.getReport().subscribe(data => this.downloadFile(data));

在downloadFile 函數中，使用回應建立blob data :

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

透過分別處理訂閱和blob 創建，建立正確的上下文，確保URL 變數包含所需的blob。

其他注意事項

為了確保成功開啟文件，驗證「rxjs/Rx」是否已被開啟非常重要import:

import 'rxjs/Rx';

此解決方案透過正確處理Observable 和blob 創建發生的上下文來解決該問題。它使 Angular2 應用程式能夠有效地下載檔案。

以上是如何使用 Observables 和 Blob 在 Angular2 中下載檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！