使用xlsx插件进行读取,引入插件:
<script src="${ctxStatic}/sheetjs/xlsx.full.min.js"></script>
<script src="${ctxStatic}/sheetjs/xlsx.core.min.js"></script>
1.导入文件
<input id="btnFile" class="btn btn-file" name="upfile" type="file" style="display: none" value="导入Excel"></input>
<button id="btnImport" class="btn-mini btn-danger btn-express" type="button">导入Excel</button>
<span class="download"><a href="${ctx}/import/template">下载模板</a></span>
使用隐藏的导入按钮来处理文件的change事件:
$("#btnImport").on("click", function (e) {//将input[file]隐藏,点击按钮才触发上传文件
$("#btnFile").trigger("click")
});
2.对导入的文件进行处理
$("#btnGqFile").on("change", function (ev) {
//console.log(ev.target.files[0]);
var reader = new FileReader();
reader.onload = function (e) {
try {
var data = e.target.result;
var workbook = XLSX.read(data, { type: 'binary' }); // 以二进制流方式读取得到整份excel表格对象
var sheetNames = workbook.SheetNames; // 工作表名称集合
var worksheet = workbook.Sheets[sheetNames[0]]; // 只读取第一张sheet
//var html = XLSX.utils.sheet_to_html(worksheet);//解析成html
//$("#demo").html(html)//将解析的html放入表格
var workData = XLSX.utils.sheet_to_json(worksheet);//解析成json数据
console.log(JSON.stringify(workData));
var rowLength = $("#subTable tr").length;
if(rowLength > 1){
if(confirm("确认要覆盖原有明细吗?")){
//alert("不保留");
var gqTable = document.getElementById('subTable');
for(let i=rowLength-1;i>0;i--){
gqTable.deleteRow(i);
}
}
}
setTable(workData);
} catch (err) {
console.log(err);
alert("文件类型不正确,请确认!");
return false;
}
};
// 以二进制方式打开文件
reader.readAsBinaryString(ev.target.files[0]);
});
3. 解析workBook对象的方法
XLSX.utils.sheet_to_csv:生成CSV格式
XLSX.utils.sheet_to_txt:生成纯文本格式
XLSX.utils.sheet_to_html:生成HTML格式
XLSX.utils.sheet_to_json:输出JSON格式