Vue+EasyPOI導出Excel（帶圖片）

一、前言

平時的工作中，Excel 導入導出功能是非常常見的功能，無論是前端 Vue (js-xlsx) 還是 后端 Java (POI)，如果讓大家手動編碼實現的話，恐怕就很麻煩了，尤其是一些定制化的模版導入導出，筆者前幾年就用原生 POI 編寫過報表之類的需求，像是 自定義 Word、Excel 導入導出，表格合並等等，那過程簡直惡心的一批....

后來接觸到了 EasyPOI ，功能也如同名稱一樣簡單，內部對 POI 進行了良好的封裝，開箱即用，即便是從來沒有接觸過 POI，只要看看簡單的示例，就能很方便的編寫出 Excel 、Word 導出導出，以及模版自定義導入導出等。

本篇主要模擬開發中最常用的場景「后端提供excel下載接口，前端調用」，快速的實現 Excel 的導出功能。

二、本文環境

SpringBoot 2.2.2 + Vue（axios） + easypoi 4.1.0（boot版本）

環境為前后端分離項目，后端采用的 Spring Boot 2.2.2 版本，easyPOI 采用的是 easypoi-spring-boot-starter 4.1.0 （截止 2020.09.29 最新版）。

EasyPOI 開發文檔：http://doc.wupaas.com/docs/easypoi/easypoi-1c0u6ksp2r091

EasyPOI 官方示例：https://gitee.com/lemur/easypoi-test

pom.xml 依賴

<!-- easypoi -->
<dependency>
    <groupId>cn.afterturn</groupId>
    <artifactId>easypoi-spring-boot-starter</artifactId>
    <version>4.1.0</version>
</dependency>

三、基於注解實現 Excel 簡單導出

通過簡單的注解，完成以前復雜的寫法。

創建一個測試類 ExcelDemo.java（含圖片）

@Data
public class ExcelDemo {

    @Excel(name = "員工名稱")
    private String employeesName;

    @Excel(name = "員工圖片",type = 2 ,width = 30 , height = 50)
    private String image;

    @Excel(name = "員工年齡")
    private Integer age;

    @Excel(name = "創建日期", format = "yyyy-MM-dd HH:mm", width = 20)
    private Date createDate;

    @Excel(name = "更新日期", format = "yyyy/MM/dd HH:mm", width = 20)
    private Date updateDate;

}

簡單看一下這個 @Excel 注解主要的值：

屬性	類型	默認值	功能
name	String	null	列名,支持name_id
type	int	1	導出類型 1 是文本， 2 是圖片，3 是函數,10 是數字 默認是文本
width	double	10	列寬
height	double	10	列高,后期打算統一使用@ExcelTarget的height,這個會被廢棄,注意
format	String	“”	時間格式,相當於同時設置了exportFormat 和 importFormat
imageType	int	1	圖片讀取類型，1表示從 file 讀取，2表示從數據庫讀取

關於圖片路徑

着重說明一下這個圖片路徑，當 type 取值為 2 的時候表示導出為圖片，同時配合使用的是 imageType 參數，該參數決定是從 file 讀取，還是去數據庫讀取，默認為從 file 中讀取，記得很早之前，有小伙伴圖片是直接 base64 存數據庫的，不過現在是沒有人干這種事了。。。

創建一個Controller方法+測試數據

@RequestMapping(value = "/exportExcel", method = RequestMethod.POST)
public void exportExcel(String id,HttpServletResponse response) throws Exception {
    List<ExcelDemo> excelDemoList = new ArrayList<>();
    for (int i = 0; i < 3; i++) {
        ExcelDemo excelDemo = new ExcelDemo();
        excelDemo.setEmployeesName("張"+i);
        excelDemo.setImage("/Users/niceyoo/workspace/File/"+i+".png");
        excelDemo.setAge(10+i);
        excelDemoList.add(excelDemo);
    }
    ExportParams params = new ExportParams("員工數據", "員工");
    Workbook workbook = ExcelExportUtil.exportExcel(params, ExcelDemo.class, excelDemoList);
    String fileName = "saleData.xlsx";
    response.setCharacterEncoding("UTF-8");
    response.setContentType("application/vnd.ms-excel; charset=utf-8");
    response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "utf-8"));
    OutputStream outputStream = response.getOutputStream();
    workbook.write(outputStream);
    outputStream.flush();
    outputStream.close();
}

我在 /Users/niceyoo/workspace/File 目錄下放置了三張圖片：

前端Vue+axios請求

API代碼：

import axios from 'axios';

export const exportExcel = (url, params) => {
    let accessToken = getStore("accessToken");
    return axios({
        method: 'post',
        url: 'http://127.0.0.1:6666/excel/exportExcel',
        data: params,
        responseType: 'arraybuffer',
        headers: {
            'Content-Type': 'application/json;charset=utf-8',
            'accessToken': 'niceyoo' 
        }
    });
};

vue中調用：

this.exportExcel("/excel/exportExcel", {}).then(res => {
    if(res.byteLength!==0){
        fileDownload(res,employeesName+'.xls');
    }else{
        Message.error("無法找到對應的文件！！！");
    }
});

其中 fileDownload 方法為引入的 js-file 依賴：

"js-file-download": "^0.4.12",

導出結果如下：

四、自定義模板導出

模板文件：

導出文件：

后端代碼：

@RequestMapping("download")
public String download(ModelMap modelMap) {
    Map<String, Object> map = new HashMap<String, Object>();
    TemplateExportParams params = new TemplateExportParams("doc/foreach.xlsx");
    List<TemplateExcelExportEntity> list = new ArrayList<TemplateExcelExportEntity>();

    for (int i = 0; i < 4; i++) {
        TemplateExcelExportEntity entity = new TemplateExcelExportEntity();
        entity.setIndex(i + 1 + "");
        entity.setAccountType("開源項目");
        entity.setProjectName("EasyPoi " + i + "期");
        entity.setAmountApplied(i * 10000 + "");
        entity.setApprovedAmount((i + 1) * 10000 - 100 + "");
        list.add(entity);
    }
    map.put("entitylist", list);
    map.put("manmark", "1");
    map.put("letest", "12345678");
    map.put("fntest", "12345678.2341234");
    map.put("fdtest", null);
    List<Map<String, Object>> mapList = new ArrayList<Map<String, Object>>();
    for (int i = 0; i < 1; i++) {
        Map<String, Object> testMap = new HashMap<String, Object>();
        testMap.put("id", "xman");
        testMap.put("name", "小明" + i);
        testMap.put("sex", "1");
        mapList.add(testMap);
    }
    map.put("maplist", mapList);

    mapList = new ArrayList<Map<String, Object>>();
    for (int i = 0; i < 6; i++) {
        Map<String, Object> testMap = new HashMap<String, Object>();

        testMap.put("si", "xman");
        mapList.add(testMap);
    }
    map.put("sitest", mapList);
    modelMap.put(TemplateExcelConstants.FILE_NAME, "用戶信息");
    modelMap.put(TemplateExcelConstants.PARAMS, params);
    modelMap.put(TemplateExcelConstants.MAP_DATA, map);
    return TemplateExcelConstants.EASYPOI_TEMPLATE_EXCEL_VIEW;
}

關於模版指令：

跟 el 表達式很像，{{ }} 表示表達式，內部寫標簽：

• 空格分割
• 三目運算 {{test ? obj:obj2}}
• n: 表示 這個cell是數值類型 {{n:}}
• le: 代表長度{{le:()}} 在if/else 運用{{le:() > 8 ? obj1 : obj2}}
• fd: 格式化時間 {{fd:(obj;yyyy-MM-dd)}}
• fn: 格式化數字 {{fn:(obj;###.00)}}
• fe: 遍歷數據,創建row
• !fe: 遍歷數據不創建row
• $fe: 下移插入,把當前行,下面的行全部下移.size()行,然后插入
• #fe: 橫向遍歷
• v_fe: 橫向遍歷值
• !if: 刪除當前列 {{!if:(test)}}
• 單引號表示常量值 '' 比如'1' 那么輸出的就是 1
• &NULL& 空格
• ]] 換行符 多行遍歷導出
• sum： 統計數據

如上，最常用的就是 $fe 遍歷標簽，用法：

fe標志+ 冒號 + list數據 + 單個元素數據（默認t，可以不寫）+ 第一個元素

{{$fe: maplist t t.id }}

t 表示預定義值，表示集合中的任意對象，如上表示，mplist 中每個對象叫做 t，t.id 就表示 t 單個元素數據的 id 屬性，t 的作用就是占位符。

EasyPOI測試項目

• https://gitee.com/lemur/easypoi-test

可以下載這個項目跑一下，基本覆蓋了比較全的用法示例。