EXCEL文件导入功能(前端代码+后端)

今天收到一个需求,要求做一个excel报表的导入页面。在网上找了一些发现写的不是很明白,所以现在整理一下自己写的代码,供大家参考,希望对大家有所帮助。

前端(jsp)

<div class="form-group" id="thumbnailUploadContainer" class="col-sm-10" style="float: left; margin-right: 50px;">
	<input id="articleImageFile" name="excelFile" type="file" class="form-control" style="width: 300px; display: inline;" />
	<input id="saveZipButton" type="button" style="width: 60px;height: 35px;" value="上传" />
</div>

参数方面大家根据自己需求再调整吧。

实际效果图(这是未传文件的状态)

前端(js)

js方面我采用的是ajax传递参数

//导入excel文件
	$("#saveZipButton").on('click', function(){			
		  var formData = new FormData();
		    var name = $("#articleImageFile").val();
		    formData.append("file",$("#articleImageFile")[0].files[0]);
		    formData.append("name",name);//这个地方可以传递多个参数
		    $.ajax({
		        url :  webRoot + "/deviceinfoup/export",
		        type : 'POST',
		        async : false,
		        data : formData,
		        // 告诉jQuery不要去处理发送的数据
		        processData : false,
		        // 告诉jQuery不要去设置Content-Type请求头
		        contentType : false,
		        beforeSend:function(){
		            console.log("正在进行,请稍候");
		        },
		        success : function(responseStr) {
		            if(responseStr=="01"){
		                alert("导入成功");
		            }else{
		                alert("导入失败");
		            }
		        }
		    });
	});

这里没有效果图....................

后端(springmvc)

	// excel导入
	@RequestMapping("/export")
	public void export(@RequestParam("file") MultipartFile file,
			HttpServletRequest request, HttpServletResponse response) {
		try {
			// @RequestParam("file") MultipartFile file 是用来接收前端传递过来的文件
			// 1.创建workbook对象,读取整个文档
			InputStream inputStream = file.getInputStream();
			POIFSFileSystem poifsFileSystem = new POIFSFileSystem(inputStream);
			HSSFWorkbook wb = new HSSFWorkbook(poifsFileSystem);
			// 2.读取页脚sheet
			HSSFSheet sheetAt = wb.getSheetAt(0);
			// 3.循环读取某一行
			for (Row row : sheetAt) {
				// 4.读取每一行的单元格
				String stringCellValue = row.getCell(0).getStringCellValue(); // 第一列数据
				String stringCellValue2 = row.getCell(1).getStringCellValue();// 第二列
				// 写多少个具体看大家上传的文件有多少列.....
				// 测试是否读取到数据,及数据的正确性
				System.out.println(stringCellValue);
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

	}
}

 

<span style="color:#ff6666"><strong>效果图</strong></span>

到这里就完成了对excel表的导入及对数据的读取,剩下的就是根据大家自身需求去操作这些数据了

            码字不易,有帮助的话大家点个赞,不足之处也希望大家提出来,谢谢

                                                                                                            愿你我共同成长!!!.....

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 45
    点赞
  • 159
    收藏
    觉得还不错? 一键收藏
  • 40
    评论
前端可以使用FileReader API将Excel文件读取为二进制数据,然后将其发送到后端Java服务器。后端可以使用Apache POI或JExcelAPI等Java库来解析Excel文件并将其转换为数据。以下是一个简单的代码示例: 前端代码: ``` <template> <div> <input type="file" @change="handleFileChange"> </div> </template> <script> export default { methods: { handleFileChange(event) { const file = event.target.files[0] const reader = new FileReader() reader.onload = () => { const data = reader.result this.uploadFile(data) } reader.readAsBinaryString(file) }, uploadFile(data) { // 将数据发送到后端Java服务器 } } } </script> ``` 后端代码: ``` @PostMapping("/upload") public List<List<String>> uploadExcel(@RequestParam("file") MultipartFile file) throws IOException { Workbook workbook = WorkbookFactory.create(file.getInputStream()); Sheet sheet = workbook.getSheetAt(0); List<List<String>> data = new ArrayList<>(); for (Row row : sheet) { List<String> rowData = new ArrayList<>(); for (Cell cell : row) { rowData.add(cell.toString()); } data.add(rowData); } return data; } ``` 这个示例使用Spring Boot和Apache POI来处理Excel文件。在这个例子中,我们将Excel文件作为MultipartFile对象上传到后端,并使用WorkbookFactory创建一个Workbook对象。然后,我们使用getSheetAt方法获取第一个Sheet对象,并使用for循环遍历每一行和每一列,将每个单元格的值添加到一个字符串列表中,并将该列表添加到数据列表中。最后,我们返回数据列表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 40
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值