<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" id="file" onchange="getFile()" style="display: none;" accept=".xls,.xlsx" />
<button id="btn">获取本地excel数据</button>
<div style="width: 100%;text-align: center;margin-top: 10px;" id="tableContainer">
</div>
<script type="text/javascript" src="./js/xlsx.core.min.js"></script>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(() => {
//手动触发上传组件
$("#file").trigger("click");
})
})
//读取本地文件
function readWorkbookFromLocalFile(file, callback) {
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function (e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
if (callback) {
callback(workbook);
}
};
}
function getFile() {
// let files = $('#file').prop('files');
let files = document.getElementById('file')['files']
if (files) {
readWorkbookFromLocalFile(files[0], (workbook) => {
const wsname = workbook.SheetNames[0]
const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
console.log(ws)
})
}
}
function aa(data) {
console.log(data.length)
}
//将sheets转换为表格
function createTables(sheets) {
let div = $("<div></div>")
//遍历每一张sheet表格
for (let i in sheets) {
//转换HTML是一个数组对象,分为三部分:meta,title,table
let table = $(XLSX.utils.sheet_to_html(sheets[i]))[2];
console.log(table)
let $table = $(table)
$table.attr("width", "80%")
$table.attr("border", "1")
$table.attr("align", "center")
$table.css({
"margin": "5%"
})
$("#tableContainer").append($table)
}
}
</script>
</body>
</html>
导入excel
于 2023-04-21 09:46:17 首次发布