上面的是效果圖javascript
選擇導入首先咱們須要吧Excel的數據所有轉成文本(這個本身百度)html
以後先導入pom依賴包vue
<!--文件上傳組件--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.5</version> </dependency> <!--讀取excel文件--> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.17</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>3.17</version> </dependency>
須要在Controller層寫入處理文件代碼java
這裏我在獲取Integer型和Double型的數據的時候,我對他進行先按照String獲取以後就去除trim()先後空格的方法去淨化字符串ajax
以後用包裝類的方法去處理字符串轉回它們原來的類型apache
//處理文件上傳 @RequestMapping(value = "/excelImport") public String uploadImg(@RequestParam("file") MultipartFile file, HttpServletRequest request) { String contentType = file.getContentType(); String fileName = file.getOriginalFilename(); if (file.isEmpty()) { return "文件爲空!"; } try { //根據路徑獲取這個操做excel的實例 HSSFWorkbook wb = new HSSFWorkbook(file.getInputStream()); //根據頁面index 獲取sheet頁 HSSFSheet sheet = wb.getSheetAt(0); //實體類集合 List<Record> importDatas = new ArrayList<Record>(); HSSFRow row = null; //循環sesheet頁中數據從第二行開始,第一行是標題 System.out.println(sheet.getPhysicalNumberOfRows()); for (int i = 2; i < sheet.getPhysicalNumberOfRows()-2; i++) { //獲取每一行數據 row = sheet.getRow(i); System.out.println(row.getCell(3).getStringCellValue()); System.out.println(row.getCell(0).getStringCellValue()); Record data = new Record(); String rid = row.getCell(0).getStringCellValue().trim(); data.setRid(Integer.parseInt(rid)); data.setStudentid(row.getCell(1).getStringCellValue()); data.setCourseid(row.getCell(2).getStringCellValue()); String fraction = row.getCell(3).getStringCellValue().trim(); data.setFraction(Double.parseDouble(fraction)); data.setDates(row.getCell(4).getStringCellValue()); data.setNewdates(row.getCell(5).getStringCellValue()); //importDatas.add(data); recordService.insert(data); } } catch (Exception e) { e.printStackTrace(); } return "1"; }
以後咱們要處理實體類的部分json
實體類必定要寫對,類型必定要匹配app
以後是js和vue的部分async
這裏用的是ajax的同步方法傳的Excel函數
function dr(){ $("#file").click(); } function doimportExcel(){ var form = new FormData(); form.append("file", document.getElementById("file").files[0]); $.ajax({ url: baseURL + '/platform/record/excelImport', //後臺url data: form, cache: false, async: false, type: "POST", //類型,POST或者GET dataType: 'json', //數據返回類型,能夠是xml、json等 processData: false, contentType: false, success: function (data) { //成功,回調函數 if(data=1){ alert("導入成功"); }else{ alert("導入失敗"); } }, error: function (data) { //失敗,回調函數 if(data=2){ alert("導入的文件沒有值"); } } }); }
最後是html
這裏是先走的導入進入方法
以後是在調的方法
<a class="btn btn-primary btn-sm" v-on:click="dr()"><i class="fa fa-plus"></i> 導入</a> <input type="file" name="file" id="file" style="display:none" v-on:change="doimportExcel()"/>
本文分享 CSDN - msfh。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。