如何使用Angular下载CSV文件？

介绍

在不同的应用程序工作中，大多数应用程序的一个共同要求是导出数据并将其保存在CSV文件中。这将有助于组织数据并生成适当格式的报告。

CSV文件包含由逗号分隔的数据值。它的扩展名是.csv。

前提条件是必须运行一个angular项目，如果你是angular的新手，那么请访问建立一个新的angular项目。

为了清楚明了，要下载一个CSV文件，前端和后端都要参与。

• 前端--这是用Angular实现的，负责向后端发出GET请求并将数据保存为CSV文件。
• 后端--负责查询数据并在请求时将其发送到前端。

在这篇博客中，我们将只关注前端方面的内容。此外，还将详细介绍在我们的请求下，将从后端获得哪种类型的数据。

足够的理论；让我们通过编写一些代码来弄脏我们的手。

实施

获取API请求

首先，我们将了解用于从后端请求数据的函数，这些数据在下载前需要保存在csv文件中。下面是一个可以放在服务文件中的函数，用来请求数据。

downloadCSV(data: any): Observable<any> {
        return this.http.get<any>(this.backendUrl, data ,{ observe: 'body', responseType: 'text' as 'json' })
    }

downloadCSV方法从后端接收数据作为一个缓冲区。通过设置GET方法的选项responseType为text as JSON，我们可以将其原封不动地传回给我们的组件，然后用它构建一个Blob对象。

在完成上述所有工作后，我们将专注于组件代码，以调用该方法并将其保存到CSV文件中。

下载文件的方法

现在，在组件中需要调用下面的函数来下载CSV文件。在downloadFile函数中，有一个属于服务的方法被调用。这里是一个响应，它将从后端获得JSON格式的blob类型的文本。现在创建的元素的href为'data: text/csv,'，并在append中加入响应。

downloadFile() {
    this.demoService.downloadCSV(payload).subscribe(
      (response) => {
        const a = document.createElement("a");
        a.href = "data:text/csv," + response;
        let filename = "sampleCSVDownload";
        a.setAttribute("download", filename + ".csv");
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
      }
    )
  }

就这样，在我们的用例中，所有的数据都将被下载成CSV文件，名为sampleCSVDownload.csv。

总结

上述方法将帮助你下载由后台提供的blob类型数据的csv文件。在编程的世界里，可能有一百种方法来解决一个问题，但我们选择一种解决方案，以一种干净的方式来实现它。我希望这篇文章能够帮助你做到这一点。