打开导入Excel表格模态框

古城微笑少年丶 2022-01-31 16:23 184阅读 0赞

开发工具与关键技术：MVC  
作者：文泽钦  
撰写时间：2019年5月13日  
打开导入Excel表格模态框基本都是HTML的代码，控制器那边不用写代码，而且是国定写法，要用的时候直接拷贝过去用就可以了。

###  ###

<div class="modal fade" id="modImportExaminee">
    	@*打开导入模态框的代码块*@
    	<div class="modal-dialog modal-lg">
    			<div class="modal-content">
    			<div class="modal-header">
    		<h5 class="modal-title">导入员工Execl数据</h5>
    	<button type="button" class="close" data-dismiss="modal">
    		<span aria-hidden="true">×</span>
    		 <span class="sr-only">Close</span>
    			</button>
    			</div>
    		<div class="modal-body">
    			<div class="row">
    		@*按钮*@
    		<div class="col-12 row justify-content-between">
    			<div class="col-12 col-md-6">
    			<form action="ImportExcel" method="post" enctype="multipart/form-data" id="formImportExcel">
    		@*accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。*@
    			<div class="custom-file form-control-sm">@*改变事件*@
    		<input type="file" class="custom-file-input" name="file" accept=".xls" id="fileUploadExecl" lang="zh-cn" onchange="upExcel()" />
    		<label class="custom-file-label" for="fileUploadExecl">选择xls文件</label>
    										</div>
    									</form>
    								</div>
    				<div class="w-100 d-inline d-md-none mb-1"></div>
    					<div class="col-12 col-md-4  m-auto">
    		<button type="button" class="btn btn-sm btn-primary mr-1" onclick="downImportTemplate()">下载导入模板</button>
    		<button type="button" class="btn btn-sm btn-primary" id="btnSaveImport" onclick="saveImport()">导入到数据库</button>
    				</div>
    		</div>
    						@*Excel临时表*@
    				<div class="col-12 table-responsive">
    		<table id="tabEmployee" layui-filter="tabEmployee"></table>
    		 					</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>

这相当于是一个存放Excel表格的容器，没有给它一个容器，Excel表格是无法上存或者无法保存的，接下来写打开导入Excel表格的模态框代码部分，打开模态框的代码都是比较简单。

###  ###

写导入Excel表格到临时表格的表头，导入的表头与表格初始化的表头差不多，把表格初始化的复制下来，删除一些隐藏的id或者修改，也就不用再写一遍同样的代码了。

###  ###

//初始化导入数据临时表
                tabEmployeeImport = layuiTable.render({
                    elem: "#tabEmployeeImport",
                    cols: [[//设置表头
                { type: "numbers", title: "序号" },
                { field: "EmployeeNumber", title: "编号", align: "center" },
    			//设置宽度
    			{ field: "EmployeeName", title: "姓名", width: 130, align: "center" },                        			 { field: "Phone", title: "电话", align: "center" },
                { field: "Cellphone", title: "手机", align: "center" },
                { field: "DeoartmentName", title: "部门", align: "center" },
                { field: "PositionName", title: "职位", align: "center" },
                { field: "Address", title: "地址", align: "center" },
                { field: "Remark", title: "备注", align: "center" }
                    ]],
                 page: {
                    limit: 10,//每页显示数据的条数
                    limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],},//每页条数的选项
                    data: []
                });

最后写打开导入Excel表格模态框的代码，打开模态框的代码块一般都是比较简单的，第一步重置表单，第二步清空临时表，第三步设置手动关闭模态框防止误关闭，第四步弹出模态框。

###  ###

现在打开看看效果，按钮有了，表头有了，也没有报错什么的，那么我么的导入模态态框完成了。  
![在这里插入图片描述][20190517075327845.png]  
下载导入模板很简单的，代码没有几行，页面上的写法如下：

###  ###

function downImportTemplate() {
                //打开一个新的窗口，并在窗口中装载指定URL地址的网页
                window.open("DownImportTemplate");
                }

控制器的也很简单：

###  ###

public ActionResult DownImportTemplate(){
     //获取模板路径
     string filePath = Server.MapPath("~/Document/Template/员工信息导入模板.xls");
     //判断模板是否存在
     if (System.IO.File.Exists(filePath)) {//确定指定文件是否存在
         //获取文件名称
         string fileName = Path.GetFileName(filePath);//考生信息导入模板.xls
         //返回文件
         return File(new FileStream(filePath, FileMode.Open), "application/octet-stream", fileName);
            }else{
                return Content("模板文件不存在，请联系系统运维人员。");
            }}

把准备好的模板放到项目中，把路径写出来，路径不要写错了，浏览器不同下载效果也不同，点击下载导入模板：  
![在这里插入图片描述][20190517075506883.png]

[20190517075327845.png]: /images/20220131/d2d5e476f62e4849a3deea1203e6be41.png
[20190517075506883.png]: /images/20220131/8d39c2ee050643d5a87d8e5211f9f921.png