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

文章Post 和 Get 两种方式实现数据导出Excel文件并下载分享给大家，欢迎收藏Java资料网，专注分享技术知识

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

前端使用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博客

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

Vue2 导出Excel + 解决乱码问题 —— axios （下载后台传过来的流文件（excel）后乱码问题）_Shimeng_1989的博客-CSDN博客

文章来源:https://blog.csdn.net/chen1030416518/article/details/129973905
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！