Using Javascript To Download File As A Csv File

When working on web applications or projects that involve manipulating data, it's common to need to download data in different formats for the user. One frequently used format is a CSV file, which stands for "Comma-Separated Values." In this article, we will explore how you can use JavaScript to enable users to download data as a CSV file directly from your web application.

Firstly, let's understand the basic approach to creating a CSV file. CSV files are simple text files that represent tabular data where each line corresponds to a row, and values within each row are separated by a delimiter, usually a comma. To ensure compatibility across different systems, it's essential to stick to this format when generating CSV files dynamically.

To initiate the download process in JavaScript, you can create a Blob object that represents raw data and then trigger the downloading of this Blob as a file. Here's a simple example:

function downloadCsvFile(data, filename) {
  const csvContent = "data:text/csv;charset=utf-8," + data;
  const encodedUri = encodeURI(csvContent);
  const link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", filename);
  document.body.appendChild(link);
  link.click();
}

In the `downloadCsvFile` function above, `data` represents the contents of your CSV file as a string, and `filename` is the desired name for the downloaded file. The function creates a data URI for the CSV content, encodes it, and sets up a hyperlink (``) element in the DOM to trigger the download when clicked.

const csvData = "Name, Age, CountrynJohn, 25, USAnAlice, 30, Canada";
const fileName = "example.csv";
downloadCsvFile(csvData, fileName);