JavaScript Tutorial
JavaScript Basics
JavaScript Objects
- js-object
- js-array
- js-string
- js-date
- js-math
- js-number
- js-boolean
JavaScript BOM
JavaScript DOM
JavaScript Validation
- js-form-validation
- js-email-validation
JavaScript OOPs
JavaScript Cookies
JavaScript Events
Exception Handling
- js-exception-handling
- javascript-try-catch
JavaScript Misc
JavaScript Advance
Differences
- jquery-vs-javascript
- javascript-vs-php
Questions
Interview Questions
- javascript-i/q

JavaScript create and download CSV file

CSV files are an essential part of computer science when you work with websites and databases. There might be some cases when the user has some data in the browser that you want to let them download this data. In that case, CSV files help the programmer to use them to download the website data in tabular form. Programmers use the CSV file format for the users to download the website data.

CSV is a simple and easy form to stores the website data in tabular form. With the help of JavaScript, you can collect the data from the HTML page and create a CSV file or also create the data manually. You can open the CSV file in MS-Excel and see the data present inside it. Almost every database requires CSV files to back up the data.

To export the data from the website, programmers use CSV files. CSV files can be created and downloaded using JavaScript. This chapter will describe how to download the website HTML table data in a CSV file.

How can you download the CSV file?

With the help of JavaScript, you can collect the data from the HTML page in a CSV file and download it easily. Use the JavaScript programming with HTML to create the data and download it in CSV format.

This chapter will show you how you can download a CSV file from a client and the server.

Why needs CSV file?

CSV files store and display the data in tabular form which is easy to understand.
It is easy and simple to use and implement. So, programmers prefer CSV to download the data of the website in .csv format.
It does not require any third-party libraries to create and download.
By using simple JavaScript methods and parameters, you can easily use the CSV file in your website.

Following example is one of the simplest examples of this chapter to create and download a CSV file.

Implementation

To create the data for your CSV file, you just need to create a multi-dimensional array that will contain the data for the HTML page. You can create data manually for learning purpose instead of taking it from the HTML page directly.

For this, you will need to create a multi-dimensional array using JavaScript and provide the different values manually (like - Justin Bieber, 24, Singer, London as Name, Age, Profession, and City) to create a CSV file.

See the code implementation to create and download the CSV file.

Create and download CSV file

Example 1

In this example, we will create a multi-dimensional array and add some data to create a CSV file. Besides this, we will add a button to download this data by the user. When the user clicks on the given button, the data will start downloading in .csv file format.

Copy Code

     <html>
<head>
<title> Download CSV file </title>
</head>

<script>
//create CSV file data in an array
var csvFileData = [
   ['Alan Walker', 'Singer'],
   ['Cristiano Ronaldo', 'Footballer'],
   ['Saina Nehwal', 'Badminton Player'],
   ['Arijit Singh', 'Singer'],
   ['Terence Lewis', 'Dancer']
];
  
//create a user-defined function to download CSV file 
function download_csv_file() {

    //define the heading for each row of the data
    var csv = 'Name,Profession\n';
    
    //merge the data with CSV
    csvFileData.forEach(function(row) {
            csv += row.join(',');
            csv += "\n";
    });
 
    //display the created CSV data on the web browser 
    document.write(csv);

   
    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
    hiddenElement.target = '_blank';
    
    //provide the name for the CSV file to be downloaded
    hiddenElement.download = 'Famous Personalities.csv';
    hiddenElement.click();
}
</script>

<body>
<h3> Click the button to download the CSV file </h3>

<!-- create an HTML button to download the CSV file on click -->
<button onclick="download_csv_file()"> Download CSV </button>

</body>
</html>

    

Test it Now

Output

Try to execute the above code on the web and get the output as shown in the below screenshot:

Click on this Download CSV button to download the CSV data created in this file and this CSV data will display on the web as well.

Open the downloaded CSV File

Look at the extension of the downloaded file, which will be .csv. For reference, open in the download CSV file in MS-Excel and see the data inside it. We will show you the output on both excel and notepad after opening the CSV file. You can see that CSV file data will show in tabular form.

See the below screenshot on MS-Excel of CSV data. Other than this, you have seen that we have also displayed the CSV data on the web browser.

CSV file on MS-Excel

CSV file on Notepad

Export and download the HTML table data of webpage into CSV file

There is one more way to download the website data in CSV file format. Sometimes, you want to allow the user to let them download the website data into CSV file format. JavaScript enables the programmer to use its in-built method to export the website data (HTML table data of the website) in a CSV file, which can be opened in MS-Excel.

Example

In the following example, we will export the HTML table data from the webpage to a CSV file and download this CSV file. We will add a button to download this CSV data file on a single click of the user. When the user clicks on this button, the data will start downloading in .csv file format.

Copy Code

     <html>
<head>
<title> Export HTML table Data to CSV using JavaScript </title>

<style>
*{
     color:#2b2b2b;
     font-family: "Roboto Condensed";
}
table { 
     width:40%;
}
th {
     text-align:left;
     color:#4679bd;
}
</style>
</head>

<script>
//user-defined function to download CSV file
function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;
   
    //define the file type to text/csv
    csvFile = new Blob([csv], {type: 'text/csv'});
    downloadLink = document.createElement("a");
    downloadLink.download = filename;
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = "none";

    document.body.appendChild(downloadLink);
    downloadLink.click();
}

//user-defined function to export the data to CSV file format
function exportTableToCSV(filename) {
   //declare a JavaScript variable of array type
   var csv = [];
   var rows = document.querySelectorAll("table tr");
 
   //merge the whole data in tabular form 
   for(var i=0; i<rows.length; i++) {
	var row = [], cols = rows[i].querySelectorAll("td, th");
	for( var j=0; j<cols.length; j++)
	   row.push(cols[j].innerText);
	csv.push(row.join(","));
   } 
   //call the function to download the CSV file
   downloadCSV(csv.join("\n"), filename);
}
</script>

<body>
<!-- create table and provide data inside it -->
<table>
<tr>
	<th> Name </th>
	<th> Profession </th>
	<th> Age </th>
	<th> Hobby </th>
</tr>
<tr>
	<td> Cristiano </td>
	<td> Hacker </td>
	<td> 24 </td>
	<td> Travelling, Sky-diving </td>
</tr>
<tr>
	<td> Jenifer </td>
	<td> Photographer </td>
	<td> 22 </td>
	<td> Cooking </td>
</tr>
<tr>
	<td> Simon </td>
	<td> Travelling-guide </td>
	<td> 35 </td>
	<td> Dancing, Gardening </td>
</tr>
<tr>
	<td> Cristiano Ronaldo </td>
	<td> Footballer </td>
	<td> 29 </td>
	<td> Singing </td>
</tr>
</table>
<p><b> Click the Download CSV button to download the created data </b></p>

<!-- button to call the user-defined function to download CSV file data -->
<button onclick="exportTableToCSV('person.csv')"> Export HTML table to CSV File </button> 
</body>
</html>

    

Test it Now

Output

Copy and save the above code in a file and execute it on the web. You will get the output as given below in the screenshot on the web browser having an HTML table containing rows of data:

Click on the given Export to HTML table to CSV File button to download the data to CSV file format. The file will download by the name of person.csv.

You can open this file in MS-Excel to see the data contained inside it. Open the downloaded file and see the content present inside it same as the web HTML table content.