下面是利用JavaScript将Excel转换为JSON的完整攻略:
1. 准备工作
首先需要准备两个库:FileSaver.js 和 XLSX.js。FileSaver.js
用于保存文件,而XLSX.js
则用于解析excel文件。
npm install file-saver xlsx
在HTML中引入相关库:
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/file-saver/dist/FileSaver.min.js"></script>
2. 读取Excel文件
首先需要定义一个<input>
元素,用于选择excel文件,并监听onchange
事件,同时定义一个<table>
元素用于展示选择的文件的数据。
<input type="file" id="file-input" onchange="loadFile(event)">
<table id="table"></table>
然后通过FileReader
读取文件:
function loadFile(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (event) {
const data = event.target.result;
const worksheet = XLSX.read(data, { type: 'binary' }).Sheets.Sheet1;
// TODO: 显示数据到表格中
};
reader.readAsBinaryString(file);
}
XLSX.read()
方法会将excel文件解析为一个数据对象,其中Sheet1
代表的是excel中的第一个工作表格。
3. 将数据转换为JSON格式
将worksheet
转换成一个二维数组:
const rows = XLSX.utils.sheet_to_row_object_array(worksheet);
接下来通过JSON.stringify()
方法将数据转换成JSON格式:
const jsonData = JSON.stringify(rows);
4. 下载JSON文件
最后使用FileSaver.js
将JSON文件保存到本地:
const blob = new Blob([jsonData], { type: 'application/json' });
saveAs(blob, 'data.json');
其中,Blob
表示原始二进制数据对象,需要将JSON字符串转换成Blob
对象,然后通过saveAs()
方法将文件保存到本地。
示例
下面给出一个完整的示例,读取一个包含了学生信息的excel文件,并将数据转换成JSON格式并保存到本地:
<input type="file" id="file-input" onchange="loadFile(event)">
<button onclick="download()">下载</button>
<table id="table"></table>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/file-saver/dist/FileSaver.min.js"></script>
<script>
let worksheet;
let headers;
function loadFile(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (event) {
const data = event.target.result;
worksheet = XLSX.read(data, { type: 'binary' }).Sheets.Sheet1;
const rows = XLSX.utils.sheet_to_row_object_array(worksheet);
headers = Object.keys(rows[0]);
renderTable(rows);
};
reader.readAsBinaryString(file);
}
function renderTable(rows) {
const table = document.getElementById('table');
table.innerHTML = '';
const headerRow = document.createElement('tr');
headers.forEach((header) => {
const cell = document.createElement('th');
cell.textContent = header;
headerRow.appendChild(cell);
});
table.appendChild(headerRow);
rows.forEach((row) => {
const rowElem = document.createElement('tr');
headers.forEach((header) => {
const cell = document.createElement('td');
cell.textContent = row[header];
rowElem.appendChild(cell);
});
table.appendChild(rowElem);
});
}
function download() {
const rows = XLSX.utils.sheet_to_row_object_array(worksheet);
const jsonData = JSON.stringify(rows);
const blob = new Blob([jsonData], { type: 'application/json' });
saveAs(blob, 'data.json');
}
</script>
这里的示例代码可以将读取到的Excel表格信息使用一个表格显示出来,并提供了一个“下载”按钮,用户点击后就能将Excel表格数据转化为JSON格式并下载。用户可以根据实际需求对此进行优化或拓展,以便于更好地将Excel表格转成JSON文件。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:利用JavaScript将Excel转换为JSON示例代码 - Python技术站