Post 和 Get 两种方式实现数据导出Excel文件并下载-Toy模板网

这篇具有很好参考价值的文章主要介绍了Post 和 Get 两种方式实现数据导出Excel文件并下载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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://www.toymoban.com/news/detail-501166.html

到了这里，关于Post 和 Get 两种方式实现数据导出Excel文件并下载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！