How to Convert JSON to Excel in JavaScript?
It is often necessary to export or download JSON data in the form of Excel spreadsheets when developing web applications, any web developer would be able to go through this article as it provides a useful function of converting JSON files to Excel format using SheetsJS through JavaScript.
These are the following ways:
Using SheetJS (xlsx)
SheetJS is one of those libraries, which specializes in all the operations such as reading, writing, or modifying the files containing spreadsheets, the library includes the support of a number of different formats including the Excel format (XLSX).
You can also install library via npm:
npm install xlsxAlternatively you can also include the library directly in your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>Example: This example shows the use of SheetJs to convert JSON to Excel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Convert JSON to Excel</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js">
</script>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h5>Approach 1: Using SheetJS (xlsx)</h5>
<button id="export-btn">Export JSON to Excel</button>
<script>
// Sample JSON data
const jsonData = [
{ "Name": "Pankaj Bind", "Age": 21, "Country": "India" },
{ "Name": "Sandeep Singh", "Age": 30, "Country": "Canada" },
{ "Name": "Vivek Kumar", "Age": 22, "Country": "UK" }
];
// Function to export JSON data to Excel
function exportJsonToExcel() {
// Create a new workbook
const workbook = XLSX.utils.book_new();
// Convert JSON data to a worksheet
const worksheet = XLSX.utils.json_to_sheet(jsonData);
// Append the worksheet to the workbook
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
// Export the workbook as an Excel file
XLSX.writeFile(workbook, "data.xlsx");
}
// Event listener for the export button
document.getElementById("export-btn").addEventListener("click", exportJsonToExcel);
</script>
</body>
</html>
Output:
Using ExcelJS
ExcelJS is also a powerful library which provides ability to create new Excel spreadsheets or modify existing ones from within JavaScript and apply some style.
You can also install library via npm:
npm install exceljsAlternatively you can also include library directly in your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>Example: This example shows the use of ExcelJS to convert JSON to Excel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Convert JSON to Excel using ExcelJS</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h5>Approach 2: Using ExcelJS</h5>
<button id="export-btn">Export JSON to Excel</button>
<script>
// Sample JSON data
const jsonData = [
{ "Name": "Pankaj Bind", "Age": 21, "Country": "India" },
{ "Name": "Sandeep Singh", "Age": 30, "Country": "Canada" },
{ "Name": "Vivek Kumar", "Age": 22, "Country": "UK" }
];
// Function to export JSON to Excel using ExcelJS
async function exportJsonToExcel() {
// Create a new workbook
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet("Sheet1");
// Add column headers
worksheet.columns = [
{ header: "Name", key: "name" },
{ header: "Age", key: "age" },
{ header: "Country", key: "country" }
];
// Add rows to the worksheet
jsonData.forEach(data => {
worksheet.addRow({
name: data.Name,
age: data.Age,
country: data.Country
});
});
// Export the workbook to Excel file
const buffer = await workbook.xlsx.writeBuffer();
const blob = new Blob([buffer],
{ type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
saveAs(blob, "data.xlsx");
}
document.getElementById("export-btn").addEventListener("click", exportJsonToExcel);
</script>
</body>
</html>
Output:
Using FileSaver.js with CSV Format
Converting the JSON into a CSV file format and then providing this as a downloadable file which can be opened as excel exported well this approach works too, this is a simple solution if you don’t want all the overhead that comes with using the Microsoft excel file format.
You can also install library via npm:
npm install file-saverAlternatively you can also include library directly in your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>Example: This example shows the use of FileSaver.js to convert JSON to Excel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Convert JSON to CSV</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js">
</script>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h5>Approach 3: Using FileSaver.js with CSV Format</h5>
<button id="export-btn">Export JSON to CSV</button>
<script>
// Sample JSON data
const jsonData = [
{ "Name": "Pankaj Bind", "Age": 21, "Country": "India" },
{ "Name": "Sandeep Singh", "Age": 30, "Country": "Canada" },
{ "Name": "Vivek Kumar", "Age": 22, "Country": "UK" }
];
// Function to convert JSON to CSV
function jsonToCsv(jsonData) {
const headers = Object.keys(jsonData[0]).join(",") + "\n";
const rows = jsonData.map(obj => Object.values(obj).join(",")).join("\n");
return headers + rows;
}
// Function to export CSV using FileSaver.js
function exportJsonToCsv() {
const csvData = jsonToCsv(jsonData);
const blob = new Blob([csvData], { type: "text/csv;charset=utf-8;" });
saveAs(blob, "data.csv");
}
document.getElementById("export-btn")
.addEventListener("click", exportJsonToCsv);
</script>
</body>
</html>
Output:
