数据结构
网络
关系型数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何在JavaScript中将JSON转换为Excel？
在各种Web应用程序中，尤其是在导出和报告方面，常常需要将JSON数据转换为Excel表格。数据通过广泛使用的Excel文件进行呈现和分析，将JSON数据转换为Excel使用户能够无缝地进行分析和管理数据。本文探讨了在JavaScript环境中，通过使用库和其他手动方法将JSON数据转换为Excel文件的不同方法。
在JavaScript中将JSON转换为Excel的方法
使用SheetJS (xlsx)库
SheetJS显然是JS最好的库之一，主要用于通过浏览器和Node.js环境打开和创建Excel文件。它兼容多种格式，包括XLSX、CSV等，这使得将JSON数据转换为Excel变得容易。
- 步骤1 - 安装SheetJS：您可以通过CDN直接包含它，也可以使用npm安装它。
// CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> // NPM npm install xlsx
示例代码
<!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>
输出
手动HTML表格导出
如果您的JSON数据相对简单，您可以手动创建一个HTML表格，将其转换为Excel文件并下载。这种方法不需要任何库，可以使用纯JavaScript完成。
- 创建HTML表格：将JSON数据转换为HTML表格格式。
- 导出到Excel：使用数据URL触发下载。
示例代码
<!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 an HTML table from JSON
let table = 'table>tr>';
for (const key in jsonData[0]) {
table += `th>${key}/th>`;
}
table += '/tr>';
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>
输出
将JSON导出为CSV格式
CSV是一种更容易与Excel兼容的格式，这使其成为导出JSON文件的合适选择。此方法包括导出JSON数据，将其转换为CSV格式，然后启动下载。
- 将JSON转换为CSV：将JSON数据映射到逗号分隔的值。
- 下载为CSV：创建一个Blob并下载文件。
示例代码
<!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 csvData = jsonData.map(row => Object.values(row).join(',')).join('
');
const csvHeader = Object.keys(jsonData[0]).join(',') + '
';
const csv = csvHeader + csvData;
// Create a Blob from CSV data 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>
输出
更新于：2024年11月14日
浏览量：14
广告