Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Convert JSON to Excel in JavaScript?
Converting JSON data to Excel format is a common requirement in web applications, especially for data export and reporting functionality. Excel files are widely used for data presentation and analysis, making JSON-to-Excel conversion essential for seamless data management. This article explores different methods to convert JSON data to Excel files using JavaScript, including library-based approaches and manual techniques.
Approaches to Convert JSON to Excel in JavaScript
Using the SheetJS (xlsx) Library
SheetJS is one of the most popular JavaScript libraries for reading and writing Excel files in both browser and Node.js environments. It supports various formats including XLSX, CSV, and more, making JSON-to-Excel conversion straightforward.
Installation
You can include SheetJS via CDN or install it using npm:
// CDN (add to HTML head) <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> // NPM installation npm install xlsx
Example: Converting 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>
<button onclick="convertJsonToExcel()">Download Excel</button>
<script>
function convertJsonToExcel() {
// JSON data to be converted
const jsonData = [
{ "Name": "Amit Kumar", "Age": 29, "City": "Mumbai" },
{ "Name": "Priya Sharma", "Age": 25, "City": "Delhi" },
{ "Name": "Ravi Patel", "Age": 35, "City": "Ahmedabad" },
{ "Name": "Anjali Verma", "Age": 28, "City": "Pune" }
];
// Convert JSON to worksheet
const worksheet = XLSX.utils.json_to_sheet(jsonData);
// Create a new workbook and add the worksheet
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
// Export the Excel file
XLSX.writeFile(workbook, "data.xlsx");
}
</script>
</body>
</html>
Manual HTML Table Export
For simple JSON data, you can create an HTML table and export it as an Excel file without external libraries. This pure JavaScript approach converts JSON to HTML table format and uses data URLs to trigger downloads.
Example: HTML Table 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 with HTML Table</title>
</head>
<body>
<button onclick="downloadExcel()">Download Excel</button>
<script>
function downloadExcel() {
// JSON data
const jsonData = [
{ "Name": "Amit Kumar", "Age": 29, "City": "Mumbai" },
{ "Name": "Priya Sharma", "Age": 25, "City": "Delhi" },
{ "Name": "Ravi Patel", "Age": 35, "City": "Ahmedabad" },
{ "Name": "Anjali Verma", "Age": 28, "City": "Pune" }
];
// Create HTML table from JSON
let table = '<table><tr>';
// Add header row
for (const key in jsonData[0]) {
table += `<th>${key}</th>`;
}
table += '</tr>';
// Add data rows
jsonData.forEach(row => {
table += '<tr>';
for (const key in row) {
table += `<td>${row[key]}</td>`;
}
table += '</tr>';
});
table += '</table>';
// Convert table to data URL and download
const dataUri = 'data:application/vnd.ms-excel,' + encodeURIComponent(table);
const link = document.createElement('a');
link.href = dataUri;
link.download = 'data.xls';
link.click();
}
</script>
</body>
</html>
Exporting JSON to CSV Format
CSV (Comma-Separated Values) is a simpler format that Excel can open directly. This method converts JSON data to CSV format and initiates a download using JavaScript Blob API.
Example: JSON to CSV
<!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>
</head>
<body>
<button onclick="convertJsonToCsv()">Download CSV</button>
<script>
function convertJsonToCsv() {
// JSON data
const jsonData = [
{ "Name": "Amit Kumar", "Age": 29, "City": "Mumbai" },
{ "Name": "Priya Sharma", "Age": 25, "City": "Delhi" },
{ "Name": "Ravi Patel", "Age": 35, "City": "Ahmedabad" },
{ "Name": "Anjali Verma", "Age": 28, "City": "Pune" }
];
// Convert JSON to CSV
const csvHeader = Object.keys(jsonData[0]).join(',') + '<br>';
const csvData = jsonData.map(row => Object.values(row).join(',')).join('<br>');
const csv = csvHeader + csvData;
// Create Blob and download
const blob = new Blob([csv], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'data.csv';
link.click();
URL.revokeObjectURL(url);
}
</script>
</body>
</html>
Comparison of Methods
| Method | File Format | External Library | Feature Support | Best For |
|---|---|---|---|---|
| SheetJS | .xlsx | Required | Full Excel features | Complex data, styling |
| HTML Table | .xls | None | Basic formatting | Simple tables |
| CSV Export | .csv | None | Plain text only | Data interchange |
Key Considerations
- Browser Compatibility: All methods work in modern browsers with JavaScript enabled
- File Size: SheetJS creates smaller, more efficient files for large datasets
- Styling: Only SheetJS supports advanced Excel features like cell formatting and formulas
- Performance: CSV export is fastest for large datasets
Conclusion
Choose SheetJS for full Excel functionality, HTML table export for simple data without dependencies, or CSV format for maximum compatibility. Each method serves different use cases depending on your requirements and constraints.
3K+ Views
