我们先来看看完成的效果图：

（相关推荐：layui）

具体步骤如下：

首先：导入layui第三方插件js，地址：

https://fly.layui.com/extend/excel/

1、在页面中引入excel.js文件：

tidy-excel-data

清理、标准化、验证并汇总杂乱的 Excel 工作簿。当 Codex 需要处理 `.xlsx`、`.xls`、`.xlsm` 或 `.csv` 格式的数据时使用，包括：统一表头格式、删除空白行与空白列、修剪文本内容、去重记录、检测数据质量问题、拆分或合并工作表、生成清洗后的工作簿，以及为业务电子表格生成审计摘要。

下载

//引入excel
    layui.config({
        base: 'layui_ext/',
    }).extend({
        excel: 'excel',
    });

2、监听头工具栏的点击事件

// 监听头工具栏事件
table.on('toolbar(terminalConfig)', function(obj) {
	var layer = layui.layer;
	// 添加终端
	if(obj.event == 'import'){
		layer.open({
			type : 1,
			shade : false,
			area : [ '350px', '260px' ],
			title : '导入Excel',
			content : $("#ImportExcel"),
			cancel : function() {
					layer.close();
			},
			success : function(layero, index) {
					ImportExcel();
			},
		});
						
	}
//导入Excel结束
});
//监听头工具栏事件结束

3、ImportExcel()方法：

//导入方法
function ImportExcel(){
	var $ = layui.jquery
	  ,upload = layui.upload;
	  var uploadInst = upload.render({
		  elem: '#importExcel',
		  /*method: 'POST',*/
		  url: basePath + 'PowerUser/importPowerUserData.action',
		  accept: 'file', //普通文件
		  exts: 'xls|excel|xlsx', //导入表格
		  auto: false,  //选择文件后不自动上传
		  before: function (obj) {
			  layer.load(); //上传loading
		  },
		  choose: function (obj) {// 选择文件回调
			  var files = obj.pushFile();
			  var fileArr = Object.values(files);// 注意这里的数据需要是数组，所以需要转换一下
			  //console.debug(fileArr)
			  // 用完就清理掉，避免多次选中相同文件时出现问题
			  for (var index in files) {
				  if (files.hasOwnProperty(index)) {
					  delete files[index];
				  }
			  }
			  uploadExcel(fileArr); // 如果只需要最新选择的文件，可以这样写： uploadExcel([files.pop()])
		  },
		  error : function(){
			  setTimeout(function () {
				  layer.msg("上传失败！", {
						icon : 1
				});
				//关闭所有弹出层
				layer.closeAll(); //疯狂模式，关闭所有层
			  },1000);
		  }
	  });
}

4、uploadExcel()方法：

function uploadExcel(files) {
    try {
    	var excel = layui.excel;
        excel.importExcel(files, {
            // 读取数据的同时梳理数据
            fields: {
            	'tId' : 'A',
				'inport' : 'B',
				'state' : 'C',
				'householdNumber' : 'D',
				'accountName' : 'E',
				'phone' : 'F'
            }
        }, function (data) {
            var arr = new Array();
            for(i = 1; i <p>方法4是读取数据，并对数据进行梳理。把Excel数据解析出来，然后把数据传到后端。后端对数据进行解析，然后插入数据库。成功之后，给前端返回"Excel导入成功"。Excel导入成功之后，重载表格，数据就可以在表格里显示了。</p>