如何在 Angular2 应用程序中实现轻松的文件下载？

Angular2 文件下载变得轻松

为 WebApi 或 MVC 应用程序开发 Angular2 客户端时，了解文件保存可能会令人畏惧。本演练将引导您完成在 Angular2 及更高版本中触发文件保存的过程。

在 Angular2 中，请求处理的可观察性质引入了微妙的变化。要成功下载文件，您需要在可观察的回调函数中创建文件 URL 对象。这确保了创建 URL 时文件数据可用。

例如，以下代码片段演示了如何处理文件下载：

this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                 error => console.log('Error downloading the file.'),
                 () => console.info('OK');

这里，我们的 _reportService.getReport( ) 调用返回一个可观察值。请求完成后，将使用文件数据调用 downloadFile 函数。

在 downloadFile 中，我们根据接收到的数据创建一个 Blob 对象并指定其 MIME 类型：

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

With创建Blob对象后，我们可以使用createObjectURL来生成可下载的URL。最后，window.open(url) 触发文件保存。

总之，通过在 observable 的回调函数中处理文件下载，您可以确保在正确的时间访问下载的数据。这使您能够轻松地在 Angular2 应用程序中提供无缝文件下载功能。

以上是如何在 Angular2 应用程序中实现轻松的文件下载？的详细内容。更多信息请关注PHP中文网其他相关文章！