如何在 Angular2 中下载文件？

在 Angular2 中下载文件

您在使用 Angular2 实现文件下载时遇到困难。具体来说，您无法了解如何保存接收到的数据并触发文件保存功能。让我们探讨如何在 Angular 中实现这一点。

问题

代码中的主要问题是用于下载文件的可观察对象在单独的上下文中运行。当尝试使用 window.URL.createObjectURL 创建 URL 变量时，这会导致出现空对象。要解决此问题，我们需要确保在正确的上下文中构造 objectURL。

解决方案

解决此问题的一个有效解决方案是订阅observable 并将数据传递给处理文件下载的单独函数。这可以通过以下代码来完成：

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

downloadFile 函数定义如下：

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

在此函数中，我们使用响应数据创建一个 blob 对象并指定文件类型。然后，我们生成 objectURL 并打开一个新窗口来下载文件。

其他注意事项

确保导入 'rxjs/Rx' 模块非常重要正确。为了使用“订阅”等可观察功能，您可能需要在组件顶部包含以下行：

import 'rxjs/Rx';

结论

通过订阅可观察对象并将数据传递给创建 objectURL 的专用函数，您可以在 Angular2 及更高版本中成功下载文件。此方法使您可以更好地控制下载过程并在正确的上下文中处理数据。

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