xlsx.full.min.js实现xlsx的导入与导出
1. json转xlsx
<html lang="zh">
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</head>
<input id="test_button" type="button" value="导出表格"></input>
</body>
<script>
function exportXlsx(data) {
const book = XLSX.utils.book_new();
const sheet = XLSX.utils.json_to_sheet(data);
XLSX.utils.book_append_sheet(book, sheet);
XLSX.writeFile(book, 'test.xlsx');
}
$("input[id='test_button']").click(function(){
var test_data = [
{
"id": "1",
"name": "张三",
},
{
"id": "2",
"name": "李四",
}
]
exportXlsx(test_data);
});
</script>
</html>
效果如下
2. xlsx转json
<html lang="zh">
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</head>
<input id="test_button" type="file" value="导入表格"></input>
</body>
<script>
function importXlsx(file) {
const reader = new FileReader();
reader.onload = function(event) {
const data = event.target.result;
const workbook = XLSX.read(data, { type: "binary" });
const sheet = workbook.Sheets[workbook.SheetNames[0]]
const json = XLSX.utils.sheet_to_json(sheet);
console.log(json);
}
reader.readAsBinaryString(file);
}
$("input[id='test_button']").change(function(){
importXlsx(this.files[0]);
});
</script>
</html>
效果如下
