Angularjs+SpringMVC实现Excel导入功能

慕凝清欢
1,012 阅读1分钟

最近有一个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)$");
    }

}


avatar
文章
阅读
粉丝
相关推荐
不要再写满屏import导入啦！🔥
70k阅读
 · 
666点赞
公司大佬对excel导入、导出的封装，那叫一个秒啊
41k阅读
 · 
241点赞
SpringBoot整合EasyExcel实现复杂Excel表格的导入&导出功能
5.3k阅读
 · 
56点赞
SpringBoot整合EasyExcel实现导入导出
2.1k阅读
 · 
15点赞
Spring Boot通过EasyExcel异步多线程实现大数据量Excel导入,百万数据30秒
4.8k阅读
 · 
71点赞
前端实现文件预览（pdf、excel、word、图片）
54k阅读
 · 
859点赞
Spring Boot框架下实现Excel导入导出
1.4k阅读
 · 
3点赞
【纯前端】如何实现excel的导入导出？
4.2k阅读
 · 
36点赞
Angular之父为什么怼React？
25k阅读
 · 
210点赞
使用ExcelJs完成excel导入导出及样式配置
9.2k阅读
 · 
57点赞

友情链接：