一、首先需要需要引入需要的包
<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
二、一个上传文件的file类型的input标签
<input type="file" onchange="showPreview(this)">
三、js相关操作对选中.xls文件进行解析,获取数据
function showPreview(source) {
// 获取传递过来的内容
let file = source.files[0];
// 创建 FileReader 示例
let showPreview = new FileReader();
// 读取文件
showPreview.readAsBinaryString(file)
// 文件读取成功时的回调函数
showPreview.onload = (e) => {
// 获取传递的表格
let data = e.target.result
// 以二进制流方式读取到整份的excel 表格对象
let workbook = XLSX.read(data, {
type: 'binary'
})
// 储存获取到的数据
let persons = []
// 表格的表格范围,可用于判断表头是否数量是否正确
let fromTo = '';
// 遍历每张表读取
for (var sheet in workbook.Sheets) {
// 判断文件是否是 excel 文件
if (workbook.Sheets.hasOwnProperty(sheet)) {
// 对表格的内容进行处理
persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
break; // 如果只取第一张表,就取消注释这行
}
}
//将persons赋值给要展示的表格数组里即可展示在界面
console.log(persons);
}
}