Download Csv File From Web Api In Angular Js

Have you ever needed to download a CSV file from a Web API using AngularJS? If so, you're in luck! In this guide, we will walk you through the steps to achieve this task seamlessly. CSV files are commonly used to store tabular data, and downloading them from a Web API can be quite handy for various projects.

Firstly, make sure you have AngularJS set up in your project. If not, you can easily include it using a Content Delivery Network (CDN) or by installing it via npm.

To begin, you need to create a service that will handle the interaction with the Web API and initiate the file download. Let's call this service `CsvDownloadService`. In this service, you can use AngularJS's $http service to make a GET request to the Web API endpoint that serves the CSV file. Here's a basic example of how you can structure this service:

app.service('CsvDownloadService', function($http) {
    this.downloadCsv = function(apiUrl) {
        return $http.get(apiUrl, { responseType: 'arraybuffer' });
    };
});

Next, you can create a controller that utilizes the `CsvDownloadService` to trigger the CSV file download. This controller will call the `downloadCsv` function from the service and handle the file download. Remember to inject the `CsvDownloadService` into your controller.

app.controller('CsvDownloadController', function($scope, CsvDownloadService) {
    $scope.downloadCsvFile = function() {
        var apiUrl = 'https://your-web-api-url.com/csv-file';
        
        CsvDownloadService.downloadCsv(apiUrl)
            .then(function(response) {
                var blob = new Blob([response.data], { type: 'text/csv' });
                var url = window.URL.createObjectURL(blob);
                var a = document.createElement('a');
                a.href = url;
                a.download = 'data.csv';
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
            })
            .catch(function(error) {
                console.error('Error downloading CSV file:', error);
            });
    };
});

In the above controller, we define the `downloadCsvFile` function, which triggers the download process. This function calls the `downloadCsv` function from `CsvDownloadService`, processes the response data as a blob, creates a temporary URL for the file, and initiates the download using an anchor tag (``).

<button>Download CSV File</button>