如何在 Angular2 中成功從 WebApi/MVC 應用程式下載檔案？

使用 Angular2 進行有效的檔案下載

在您的 Angular2 應用程式中，您在儲存從 WebApi / MVC 應用程式下載的檔案時遇到了困難。讓我們深入研究您的問題並提供解決方案。

您的元件程式碼（如所提供）利用 Blob() 建構函式根據接收到的資料建立檔案。然而，您面臨著 URL.createObjectURL 函數的挑戰，該函數在目前的 ECMAScript 規格中不可用。

解決方案源自 Angular2 中可觀察量的本質。用於下載檔案的可觀察物件在不同的上下文中執行，從而導致您遇到的問題。為了解決這個問題，我們需要修改程式碼來訂閱可觀察量，並在該訂閱中執行檔案建立和保存邏輯。

一個有效的方法是重構downloadfile() 方法以訂閱可觀察量為如下：

downloadfile(type: string){
  this.pservice.downloadfile(this.rundata.name, type)
    .subscribe(data => {
      this.downloadFile(data); // Call a separate function to handle file creation and saving
    },
    error => console.log("Error downloading the file."),
    () => console.log('Completed file download.'));
}

在這個更新的方法中，我們引入了一個新的downloadFile( ) 函數，它負責建立檔案並啟動下載。

downloadFile(data: Response) {
  const blob = new Blob([data], { type: "application/octet-stream" });
  const url = window.URL.createObjectURL(blob);
  window.open(url);
}

透過訂閱可觀察的並定義 downloadFile() 函數，我們確保檔案建立和保存在正確的上下文中進行，使您能夠成功儲存和開啟下載的檔案。

以上是如何在 Angular2 中成功從 WebApi/MVC 應用程式下載檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！