Post 和 Get 两种方式实现数据导出Excel文件并下载

快来打我* 2023-10-08 23:52 68阅读 0赞

前端使用Vue，后端使用Springboot。

一般而言，使用post方式是比较方便的。但有时候，需要下载的数据在后端进行查询的时候很比较复杂的查询条件，而这个查询条件是前端进行下载请求的时候传递的参数，如果参数比较复杂或参数量比较大，超出了get方式的参数限制，就需要使用post方式进行下载请求。

--------------------

#### **Post方式：** ####

后端将查询到的数据作一些处理之后，将数据写入到请求的响应体中，前端在请求接口之后，在回调函数中，将响应体中的二进制流转化为Blob对象，然后创建一个下载链接进行下载。

后端代码：

@PostMapping("/export")
        public void export(HttpServletResponse response, @RequestParam("className") String className) {
            try {
                // 根据班级名获取该班级的所有学生的信息
                List<Student> list = StudentService.lists(className);
                // 为了导出的表格中有序号，在定义实体类的时候加了一个serialNo属性
                for(int i = 0; i < list.size(); i++) {
                    list.get(i).setSerialNo(i + 1);
                }
                // 设置excel文件的名字，这边可以不用，在前端重新设置了文件名
                String name = "学生信息列表.xlsx";
                String fileName = new String(name.getBytes("gb2312"), "ISO8859-1");
                response.setContentType("application/octet-stream");
                response.setHeader("Content-Disposition","attachment;filename=" + fileName);
                
                // 这里注册的 CustomCellWriteHandler工具类是用来在excel中适应内容自动调整表格宽度的
                ExcelWriter writer = EasyExcel.write(response.getOutputStream()).registerWriteHandler(new CustomCellWriteHandler()).build();
                WriteSheet sheet = EasyExcel.writerSheet(0,"sheet").head(BillList.class).build();
                writer.write(list,sheet);
                writer.finish();
            } catch (Exception e) {
                log.info("jjj", e);
            }
        }

Student 实体类：

@Data
    public class Student{
        // ExcelIgnore 注册表示该属性不导出到excel
        @ExcelIgnore
        private Integer id;
        @ExcelProperty(value = "班级", index = 1)
        private String className;
        @ExcelProperty(value = "学号", index = 2)
        private String studentNumber;
        @ExcelProperty(value = "姓名", index = 3)
        private String name;
        @ExcelProperty(value = "性别", index = 4)
        private String gender;
        @
    
        // 导出excel的序号列, index值表示在导出的excel中的第几列，从0开始
        @ExcelProperty(value = "序号", index = 0)
        private Integer serialNo;
    }

CustomCellWriteHandler工具类:

import com.alibaba.excel.enums.CellDataTypeEnum;
    import com.alibaba.excel.metadata.CellData;
    import com.alibaba.excel.metadata.Head;
    import com.alibaba.excel.write.metadata.holder.WriteSheetHolder;
    import com.alibaba.excel.write.style.column.AbstractColumnWidthStyleStrategy;
    import org.apache.commons.collections4.CollectionUtils;
    import org.apache.poi.ss.usermodel.Cell;
    
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    /**
     * Excel 导出列宽度自适应
     */
    public class CustomCellWriteHandler extends AbstractColumnWidthStyleStrategy {
    
        private Map<Integer, Map<Integer, Integer>> CACHE = new HashMap<>();
    
        @Override
        protected void setColumnWidth(WriteSheetHolder writeSheetHolder, List<CellData> cellDataList, Cell cell, Head head, Integer integer, Boolean isHead) {
            boolean needSetWidth = isHead || !CollectionUtils.isEmpty(cellDataList);
            if (needSetWidth) {
                Map<Integer, Integer> maxColumnWidthMap = CACHE.get(writeSheetHolder.getSheetNo());
                if (maxColumnWidthMap == null) {
                    maxColumnWidthMap = new HashMap<>();
                    CACHE.put(writeSheetHolder.getSheetNo(), maxColumnWidthMap);
                }
    
                Integer columnWidth = this.dataLength(cellDataList, cell, isHead);
                if (columnWidth >= 0) {
                    if (columnWidth > 255) {
                        columnWidth = 255;
                    }
    
                    Integer maxColumnWidth = maxColumnWidthMap.get(cell.getColumnIndex());
                    if (maxColumnWidth == null || columnWidth > maxColumnWidth) {
                        maxColumnWidthMap.put(cell.getColumnIndex(), columnWidth);
                        writeSheetHolder.getSheet().setColumnWidth(cell.getColumnIndex(), columnWidth * 256);
                    }
    
                }
            }
        }
    
        private Integer dataLength(List<CellData> cellDataList, Cell cell, Boolean isHead) {
            if (isHead) {
                return cell.getStringCellValue().getBytes().length;
            } else {
                CellData cellData = cellDataList.get(0);
                CellDataTypeEnum type = cellData.getType();
                if (type == null) {
                    return -1;
                } else {
                    switch (type) {
                        case STRING:
                            return cellData.getStringValue().getBytes().length;
                        case BOOLEAN:
                            return cellData.getBooleanValue().toString().getBytes().length;
                        case NUMBER:
                            return cellData.getNumberValue().toString().getBytes().length;
                        default:
                            return -1;
                    }
                }
            }
        }
    }

--------------------

前端代码：

// 导入接口文件，一个controller的接口都配置在一个js/ts文件中
    import studentApi from '@/api/studentAPI'
    
    // exportExcel 绑定了下载按钮的点击事件
    function exportExcel() {
      studentApi.exportExcelUrl(className).then(res=>{
        const url = window.URL.createObjectURL(new Blob([res]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '学生信息列表.xlsx')
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href) // 释放URL 对象
        document.body.removeChild(link)
        link = null
      })
    }

studentAPI.ts：

import AxiosInstance from "@/plugins/axiosInstance";
    
    const exportExcelUrl = (className:string) => {
        return AxiosInstance.post('/rent/export', {responseType:'arraybuffer', params: {className: className}})
    }
    
    export default {
        exportExcelUrl
    }

axiosInstance.ts：

import axios from 'axios'
    
    // 配置后端接口地址前缀
    const ConfigBaseURL = 'http://localhost:8080/'     // 本地环境
    const Axios = axios.create({
        timeout: 5000, 
        baseURL: ConfigBaseURL,
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        }
    })
    
    Axios.interceptors.request.use(config => {
        return config
    }, error => {
        return Promise.reject(error)
    })
    
    Axios.interceptors.response.use(response => {
        var data = response.data
        return response.data
    }, error => {
    
        return Promise.reject(error)
    })
    
    export default Axios ;

--------------------

#### **Get方式：** ####

实现方式和post基本一致，后端只需要修改一下接口的请求方式和response的contentType；前端就只需要提供一个链接即可。

后端代码：

@GetMapping("/export")
        public void export(HttpServletResponse response, @Param("className") String className) {
            try {
                // 根据班级名获取该班级的所有学生的信息
                List<Student> list = StudentService.lists(className);
                // 为了导出的表格中有序号，在定义实体类的时候加了一个serialNo属性
                for(int i = 0; i < list.size(); i++) {
                    list.get(i).setSerialNo(i + 1);
                }
                // 设置Excel文件名
                String name = "学生信息列表.xlsx";
                String fileName = new String(name.getBytes("gb2312"), "ISO8859-1");
                response.setContentType("application/vnd.ms-excel;chartset=utf-8");
                response.setHeader("Content-Disposition","attachment;filename=" + fileName);
    
                // 这里注册的 CustomCellWriteHandler工具类是用来在excel中适应内容自动调整表格宽度的
                ExcelWriter writer = EasyExcel.write(response.getOutputStream()).registerWriteHandler(new CustomCellWriteHandler()).build();
                WriteSheet sheet = EasyExcel.writerSheet(0,"sheet").head(BillList.class).build();
                writer.write(list,sheet);
                writer.finish();
            } catch (Exception e) {
                log.info("jjj", e);
            }
        }

除了请求方式从Post改为了Get，还有一个变化之处就是：

response.setContentType("application/vnd.ms-excel;chartset=utf-8");

前端代码：

// exportExcel 绑定了下载按钮的点击事件
    function exportExcel() {
      // 本来后面的接口地址也是配置在接口文件中的，这边为了方便阅读，直接放在了此处。
      var className = 2205
      window.location.href = "http://localhost:8080/student/export?className=" + className
    }

--------------------

参考：

[使用VUE+SpringBoot+EasyExcel 整合导入导出demo\_娜乌西卡lxm的博客-CSDN博客][VUE_SpringBoot_EasyExcel _demo_lxm_-CSDN]

[通过get或post请求下载excel表格的解决办法\_get请求下载excel\_一键写代码的博客-CSDN博客][get_post_excel_get_excel_-CSDN]

[Vue2 导出Excel + 解决乱码问题 —— axios （下载后台传过来的流文件（excel）后乱码问题）\_Shimeng\_1989的博客-CSDN博客][Vue2 _Excel _ _ _ axios _excel_Shimeng_1989_-CSDN]

[VUE_SpringBoot_EasyExcel _demo_lxm_-CSDN]: https://blog.csdn.net/wating_you/article/details/111238955
[get_post_excel_get_excel_-CSDN]: https://blog.csdn.net/qq_42991509/article/details/105514477
[Vue2 _Excel _ _ _ axios _excel_Shimeng_1989_-CSDN]: https://blog.csdn.net/Shimeng_1989/article/details/81773868