Angularjs+SpringMVC實現Excel導入功能

最近有一個Excel的導入功能需求，經過AngularJS和SpringMVC來實現。代碼以下：

須要引入的maven jar包：

<!--excel須要的jar包-->
<dependency>
  <groupId>org.apache.poi</groupId>
  <artifactId>poi-ooxml-schemas</artifactId>
  <version>3.10-FINAL</version>
</dependency>

<dependency>
  <groupId>org.apache.poi</groupId>
  <artifactId>poi-ooxml</artifactId>
  <version>3.10-FINAL</version>
</dependency>

<dependency>
  <groupId>org.apache.poi</groupId>
  <artifactId>poi</artifactId>
  <version>3.10-FINAL</version>
</dependency>複製代碼

前端部分

（1）html部分：

<div class="layui-inline">
    <div class="layui-input-inline">
        <input type="file" id="uploadFile" file-model="myFile" style="border: 1px solid #1AA094;padding: 5px;border-radius: 4px;"/>
    </div>

    <button ng-click="saveFile()" class="layui-btn">
        <i class="fa fa-download" aria-hidden="true"></i> 批量導入
    </button>
</div>複製代碼

效果圖：

（2）js部分：

var app = angular.module("myApp",[]);
layui.use('layer');
app.controller("dataCtrl",["$scope","dataService",function ($scope,dataService) {
    $scope.saveFile = function() {
        var formData = new FormData();//使用formData進行文件上傳
        var file = document.querySelector('input[type=file]').files[0];//獲取上傳的文件
        formData.append('filename', file);
        if ($("#uploadFile").val() == ""){//判斷是否選擇文件
            layer.msg("請選擇文件！");
        }else {
            dataService.uploadFile(formData,function (data) {//回調函數
                if (data.status == 1){//導入excel成功
                    layer.msg(data.msg);
                    $("#uploadFile").val("");//清空
                }else {//導入excel失敗
                    layer.msg(data.msg);
                    $("#uploadFile").val("");//清空
                }
            });
        }
    };
}]);

app.service("dataService",["$http",function ($http) {
    this.uploadFile = function (formData,callback) {
        $http({
            method:'POST',
            url:"/batchimport",
            data: formData,
            headers: {'Content-Type':undefined},
            transformRequest: angular.identity
        }).then(function(data){
            if (callback) {
                callback(data.data);
            }
        });
    };
}]);
複製代碼

tip：當經過anjularjs的http請求來上傳文件時，須要讓當前的request成爲一個Multipart/form-data請求，anjularjs對於post和get請求默認的Content-Type header 是application/json。經過設置‘Content-Type’: undefined，這樣瀏覽器不只幫咱們把Content-Type 設置爲 multipart/form-data，還填充上當前的boundary，若是手動設置爲： ‘Content-Type’: multipart/form-data，後臺會拋出異常：the current request boundary parameter is null。 此外， 經過設置 transformRequest: angular.identity ，anjularjs transformRequest function 將序列化咱們的formdata object。

後臺部分

（1）Spring的配置文件中加入文件上傳的配置：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
      p:defaultEncoding="UTF-8" p:maxUploadSize="9242880"/>複製代碼

（2）Controller部分接收前端傳過來的文件和參數，解析處理：

@RequestMapping(value = "batchimport", method = RequestMethod.POST)
public @ResponseBody Map batchimport(@RequestParam(value="filename") MultipartFile file,
                       HttpServletRequest request, HttpServletResponse response) throws IOException {
    //判斷文件是否爲空
    if(file==null) return null;
    //獲取文件名
    String name=file.getOriginalFilename();
    //進一步判斷文件是否爲空（即判斷其大小是否爲0或其名稱是否爲null）
    long size=file.getSize();
    if(name==null || ("").equals(name) && size==0) return null;

    //批量導入。參數：文件名，文件。
    boolean b = testService.batchImport(name,file);
    Map map = new HashMap();
    if(b){
        String Msg ="批量導入EXCEL成功！";
        map.put("msg",Msg);
        map.put("status",1);
    }else{
        String Msg ="批量導入EXCEL失敗！";
        map.put("msg",Msg);
        map.put("status",0);
    }
    return map;
}複製代碼

（3）Service層業務邏輯處理：

//批量導入
public boolean batchImport(String name,MultipartFile file){
    boolean b = false;
    //建立處理EXCEL
    ImportExcel readExcel=new ImportExcel();
    //解析excel，獲取集合。
    List<List<Object>> dataList = readExcel.getExcelInfo(name ,file);

    if(dataList != null){
        b = true;
    }

    //迭代添加信息
    for(List list:dataList){
        System.out.println(list);
        //賦值實例對象 作插入數據庫操做
        ...
    }
    return b;
}
複製代碼

（4）導入Excel工具類：

package com.niit.test.import;

/**
 * Created by Audrey on 2019/1/7 15:51
 */

import org.apache.poi.hssf.usermodel.HSSFDateUtil;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;


public class ImportExcel {
    //總行數
    private int totalRows = 0;
    //總條數
    private int totalCells = 0;
    //錯誤信息接收器
    private String errorMsg;
    //構造方法
    public ImportExcel(){}
    //獲取總行數
    public int getTotalRows()  { return totalRows;}
    //獲取總列數
    public int getTotalCells() {  return totalCells;}
    //獲取錯誤信息
    public String getErrorInfo() { return errorMsg; }

    /**
     * 驗證EXCEL文件
     * @param filePath
     * @return
     */
    public boolean validateExcel(String filePath){
        if (filePath == null || !(WDWUtil.isExcel2003(filePath) || WDWUtil.isExcel2007(filePath))){
            errorMsg = "文件名不是excel格式";
            return false;
        }
        return true;
    }

    /**
     * 讀EXCEL文件，獲取信息集合
     * @param
     * @return
     */
    public List<List<Object>> getExcelInfo(String fileName,MultipartFile Mfile){

        //把spring文件上傳的MultipartFile轉換成CommonsMultipartFile類型
        /*CommonsMultipartFile cf= (CommonsMultipartFile)Mfile; //獲取本地存儲路徑
        File file = new  File("D:\\fileupload");
        //建立一個目錄 （它的路徑名由當前 File 對象指定，包括任一必須的父路徑。）
        if (!file.exists()) file.mkdirs();
        //新建一個文件
        File file1 = new File("D:\\fileupload\\" + new Date().getTime() + ".xlsx");
        //將上傳的文件寫入新建的文件中
        try {
            cf.getFileItem().write(file1);
        } catch (Exception e) {
            e.printStackTrace();
        }*/

        //初始化客戶信息的集合
        List<List<Object>> dataList=new ArrayList<List<Object>>();
        //初始化輸入流
        InputStream is = null;
        try{
            //驗證文件名是否合格
            if(!validateExcel(fileName)){
                return null;
            }
            //根據文件名判斷文件是2003版本仍是2007版本
            boolean isExcel2003 = true;
            if(WDWUtil.isExcel2007(fileName)){
                isExcel2003 = false;
            }

            //把spring文件上傳的MultipartFile轉換成CommonsMultipartFile類型
            CommonsMultipartFile cf= (CommonsMultipartFile)Mfile; //獲取本地存儲路徑
            File file = new  File("D:\\fileupload");
            //建立一個目錄 （它的路徑名由當前 File 對象指定，包括任一必須的父路徑。）
            if (!file.exists()) file.mkdirs();
            String folderName;
            if (isExcel2003){
                folderName = "D:\\fileupload\\" + new Date().getTime() + ".xls";
            }else {
                folderName = "D:\\fileupload\\" + new Date().getTime() + ".xlsx";
            }
            //新建一個文件
            File file1 = new File(folderName);
            //將上傳的文件寫入新建的文件中
            cf.getFileItem().write(file1);

            //根據新建的文件實例化輸入流
            is = new FileInputStream(file1);
            //根據excel裏面的內容讀取客戶信息
            dataList = getExcelInfo(is, isExcel2003);
            is.close();
        }catch(Exception e){
            e.printStackTrace();
        } finally{
            if(is !=null)
            {
                try{
                    is.close();
                }catch(IOException e){
                    is = null;
                    e.printStackTrace();
                }
            }
        }
        return dataList;
    }
    /**
     * 根據excel裏面的內容讀取信息
     * @param is 輸入流
     * @param isExcel2003 excel是2003仍是2007版本
     * @return
     * @throws IOException
     */
    public  List<List<Object>> getExcelInfo(InputStream is,boolean isExcel2003){
        List<List<Object>> dataList=null;
        try{
            /** 根據版本選擇建立Workbook的方式 */
            Workbook wb = null;
            //當excel是2003時
            if(isExcel2003){
                wb = new HSSFWorkbook(is);
            }
            else{//當excel是2007時
                wb = new XSSFWorkbook(is);
            }
            //讀取Excel裏面客戶的信息
            dataList=readExcelValue(wb);
        }
        catch (IOException e)  {
            e.printStackTrace();
        }
        return dataList;
    }
    /**
     * 讀取Excel裏面的信息
     * @param wb
     * @return
     */
    private List<List<Object>> readExcelValue(Workbook wb){
        //獲得第一個shell
        Sheet sheet=wb.getSheetAt(0);

        //獲得Excel的行數
        this.totalRows=sheet.getPhysicalNumberOfRows();

        //獲得Excel的列數(前提是有行數)
        if(totalRows>=1 && sheet.getRow(0) != null){
            this.totalCells=sheet.getRow(0).getPhysicalNumberOfCells();
        }

        List<List<Object>> dataList=new ArrayList<List<Object>>();
        //循環Excel行數,從第二行開始。標題不入庫
        for(int r=1;r<totalRows;r++){
            Row row = sheet.getRow(r);
            if (row == null) continue;
            List<Object> objects = new ArrayList<Object>();

            //循環Excel的列
            for(int c = 0; c <this.totalCells; c++){
                Cell cell = row.getCell(c);
                if (null != cell){
                    /*cell.setCellType(Cell.CELL_TYPE_STRING);
                    objects.add(cell.getStringCellValue());*/
                    //處理Excel含有日期格式
                    if (cell.getCellType() == 0){//判斷cell的類型
                        //判斷是否爲日期類型
                        if (HSSFDateUtil.isCellDateFormatted(cell)){
                            Date d = cell.getDateCellValue();
                            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
                            String time = sdf.format(d);
                            cell.setCellType(Cell.CELL_TYPE_STRING);
                            objects.add(time);
                        }else {
                            cell.setCellType(Cell.CELL_TYPE_STRING);
                            objects.add(cell.getStringCellValue());
                        }
                    }else {
                        cell.setCellType(Cell.CELL_TYPE_STRING);//設置cell的格式類型，把純數字做爲字符串讀進來
                        objects.add(cell.getStringCellValue());
                    }

                }
            }
            //添加客戶
            dataList.add(objects);
        }
        return dataList;
    }

}

複製代碼

（5）判斷Excel版本（excel文件格式）的工具類：

package com.niit.test.utils;

/**
 * Created by Audrey on 2019/1/7 15:52
 */
public class WDWUtil {

    // @描述：是不是2003的excel，返回true是2003
    public static boolean isExcel2003(String filePath)  {
        return filePath.matches("^.+\\.(?i)(xls)$");
    }

    //@描述：是不是2007的excel，返回true是2007
    public static boolean isExcel2007(String filePath)  {
        return filePath.matches("^.+\\.(?i)(xlsx)$");
    }

}
複製代碼