快捷導(dǎo)航

使用hutool工具進行導(dǎo)入導(dǎo)出excel表格

更新時間：2023年10月31日 09:29:32 作者：Java|小白

如何在后臺添加導(dǎo)入導(dǎo)出表格的功能呢,本期的文章將會帶領(lǐng)小伙伴們一起實現(xiàn)此功能,文中有詳細的代碼示例和圖文介紹,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

1.先引入hutool的相關(guān)依賴

 <!--hutool-->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.7.20</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>4.1.2</version>
        </dependency>

2.導(dǎo)出

創(chuàng)建一個Controller進行測試

  //表格導(dǎo)出接口
    @GetMapping("/export")
    public void export(HttpServletResponse response) throws IOException {
        //查詢所有用戶
        List<User> list= userService.list();
        //在內(nèi)存操作，寫到瀏覽器
        ExcelWriter writer= ExcelUtil.getWriter(true);
 
        //自定義標(biāo)題別名
        writer.addHeaderAlias("username","用戶名");
        writer.addHeaderAlias("password","密碼");
        writer.addHeaderAlias("nickname","昵稱");
        writer.addHeaderAlias("email","郵箱");
        writer.addHeaderAlias("phone","電話");
        writer.addHeaderAlias("address","地址");
        writer.addHeaderAlias("createTime","創(chuàng)建時間");
 
        //默認配置
        writer.write(list,true);
        //設(shè)置content—type
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset:utf-8");
 
        //設(shè)置標(biāo)題
        String fileName= URLEncoder.encode("用戶信息","UTF-8");
        //Content-disposition是MIME協(xié)議的擴展，MIME協(xié)議指示MIME用戶代理如何顯示附加的文件。
        response.setHeader("Content-Disposition","attachment;filename="+fileName+".xlsx");
        ServletOutputStream outputStream= response.getOutputStream();
 
        //將Writer刷新到OutPut
        writer.flush(outputStream,true);
        outputStream.close();
        writer.close();
    }

測試結(jié)果如下

Vue前端使用這個代碼進行訪問即可

  //點擊函數(shù)exp, 導(dǎo)出表格
            exp(){
                window.open("http://localhost:9090/user/export")
            }

3.導(dǎo)入

創(chuàng)建一個Controller進行測試

因為我前面導(dǎo)出設(shè)置了別名，所以這里我選擇用第二種方式，

接下來可以去postman驗證是否能實現(xiàn)功能

/**
     * 導(dǎo)入excel
     * @param file
     */
    @PostMapping("/import")
    public void importExcel(MultipartFile file) throws IOException {
        //1.第一種 頭必須和實體(英文)一樣
        //文件處理成io流
        InputStream in = file.getInputStream();
//        //io流給ExcelReader
        ExcelReader excelReader=ExcelUtil.getReader(in);
//        //讀取數(shù)據(jù)且轉(zhuǎn)化為list
//        List<User> list = excelReader.readAll(User.class);
 
        //2.第二種導(dǎo)入方式
        //忽略第一行頭(第一行是中文的情況),直接讀取表的內(nèi)容
        List<List<Object>> list = excelReader.read(1);
        List<User> listUser = CollUtil.newArrayList();
        for (List<Object> row: list) {
            User user=new User();
            user.setUsername(row.get(0).toString());
            user.setPassword(row.get(1).toString());
            user.setNickname(row.get(2).toString());
            user.setNickname(row.get(3).toString());
            user.setPhone(row.get(4).toString());
            user.setAddress(row.get(5).toString());
            listUser.add(user);
//            ****類似一一對應(yīng)****
        }
        //批量注冊進數(shù)據(jù)庫
        userService.saveBatch(listUser);
    }

前端的話我是用的elemen-ui

      <el-upload action="http://localhost:9090/user/import"  
                    :show-file-list="false" accept="xlsx" 
                    :on-success="handleImportSuccess" 
                    style="display: inline-block;margin-right: 5px">
           <el-button type="primary">導(dǎo)入 <i class="el-icon-bottom"></i></el-button>
      </el-upload>

on-success是一個鉤子函數(shù)，彈了一個插入成功的信息跟刷新頁面的操作

//導(dǎo)入,鉤子函數(shù)進行頁面的提示跟成功后頁面的刷新
            handleImportSuccess(){
                this.$message.success("導(dǎo)入成功")
                this.load();
            }