Serve data as CSV with a ASP.NET Core Web API and consume it in a React application using Axios

namespace ArbitrarySolution.Shared.Models;

public class ArbitraryModel
{
    public string Email { get; set; } = string.Empty;
    public string Name { get; set; } = string.Empty;
}

using System.Net.Mime;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using ArbitrarySolution.Services;
using ArbitrarySolution.Shared.Models;

namespace ArbitrarySolution.Server.Controllers;

[Authorize(Policy = AuthorizationPolicies.AssignmentToArbitraryRoleRequired)]
[ApiController]
[Route("api/[controller]")]
public class ArbitraryController : ControllerBase
{
    private readonly ArbitraryService _arbitraryService;
    private readonly ExportService _exportService;

    public ArbitraryController(ArbitraryService arbitraryService, ExportService exportService)
    {
        _arbitraryService = arbitraryService;
        _exportService = exportService;
    }

    [HttpGet("export")]
    [ProducesResponseType(StatusCodes.Status200OK)]
    [ProducesResponseType(StatusCodes.Status400BadRequest)]
    public async Task<ActionResult> ExportCsv()
    {
        var dataToBeExported = await _arbitraryService.GetDataToBeExportedAsync();

        var fileContent = await _exportService.GetCsvAsync(dataToBeExported);
        return File(fileContent, MediaTypeNames.Application.Octet);
    }
}

using System.Globalization;
using CsvHelper;
using CsvHelper.Configuration;
using Microsoft.Extensions.Logging;
using ArbitrarySolution.Shared.Models;

namespace ArbitrarySolution.Services;

public class ExportService
{
    private readonly ILogger<ExportService> _logger;

    public ExportService(ILogger<ExportService> logger)
    {
        _logger = logger;
    }

    public async Task<byte[]> GetCsvAsync(IEnumerable<ArbitraryModel> arbitraryModels)
    {
        _logger.LogInformation("Generating CSV ...");

        await using var memoryStream = new MemoryStream();
        await using var streamWriter = new StreamWriter(memoryStream);
        await using var csvWriter = new CsvWriter(streamWriter, CultureInfo.InvariantCulture);
        // register mapping configuration for ArbitraryModel class
        csvWriter.Context.RegisterClassMap<ArbitraryModelMap>();
        await csvWriter.WriteRecordsAsync(arbitraryModels);

        // flush stream writer as recommended by the docs
        await streamWriter.FlushAsync();

        _logger.LogInformation("Generating CSV SUCCEEDED");

        return memoryStream.ToArray();
    }

    public class ArbitraryModelMap : ClassMap<ArbitraryModel>
    {
        public ArbitraryModelMap()
        {
            Map(m => m.Email).Index(0).Name("Email");
            Map(m => m.Name).Index(1).Name("Name");
        }
    }
}

import axios, { AxiosInstance } from "axios";

export class HttpClient {
  private readonly axiosInstance: AxiosInstance;

  constructor() {
    this.axiosInstance = axios.create();
  }

  async export<TResponse, TParameters>(
    url: string,
    params: TParameters
  ): Promise<TResponse> {
    const response = await this.axiosInstance.get<TResponse>(
      `${HttpClient.getApiUrl() + url}`,
      { params, responseType: "blob" }
    );
    return response.data;
  }

  public static getApiUrl() {
    const backendHost = HttpClient.getCurrentHost();

    return `${backendHost}/api/`;
  }

  public static getCurrentHost() {
    const host = window.location.host;
    const url = `${window.location.protocol}//${host}`;
    return url;
  }
}

import { createAndClickLink } from "../components/common/hooks/useDownloadFile";
import { ArbitraryModel } from "../models/ArbitraryModel";
import { QueryConfig } from "../models/common/ServiceCalls/QueryConfig";
import { HttpClient } from "./HttpClient";

export class ExportService {
  public baseQueryKey = ["Arbitrary"];

  constructor(protected httpClient: HttpClient) {}

  public exportArbitrary = async () =>
    (async () => {
      const response = await this.httpClient.export<
        Blob,
        {}
      >("arbitrary/export", { });
      createAndClickLink({
        content: response,
        fileName: `export.csv`,
      });
      return response;
    })();

  public exportArbitraryQueryConfig = (): QueryConfig<Blob> => ({
    queryFn: () => this.exportArbitrary(),
    queryKey: [
      ...this.baseQueryKey,
      "export",
    ],
  });
}

interface CreateAndClickLinkParams {
  content: Blob;
  fileName: string;
}

export const createAndClickLink = ({
  content,
  fileName,
}: CreateAndClickLinkParams): void => {
  const blobUrl = window.URL.createObjectURL(content);
  const link = document.createElement("a");
  link.href = blobUrl;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  window.URL.revokeObjectURL(blobUrl);
};

interface UseDownloadAsFileReturn {
  downloadAsFile: (params: CreateAndClickLinkParams) => void;
}

export const useDownloadAsFile = (): UseDownloadAsFileReturn => ({
  downloadAsFile: (params: CreateAndClickLinkParams) => {
    createAndClickLink(params);
  },
});