資料結構
網路
關係型資料庫管理系統(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
廣告