本文应用 SpringBoot + vue + easyExcel 实现导出 Excel 性能,并解决文件中文乱码问题以及 Excel 宽度自适应的问题。须要先导入 pom 包。

<dependency>    <groupId>com.alibaba</groupId>    <artifactId>easyexcel</artifactId></dependency>

easyExcel 开源地址:https://github.com/alibaba/ea...

1 excel 文件下载

vue中下载excel流文件及设置下载文件名:https://segmentfault.com/a/11...

应用 vue-json-excel 控件: https://www.npmjs.com/package...

形式一:

人为结构 a 标签,主动点击。

PS:留神,文件名称,不能通过上述链接中的 this.filename 获取到。

axios    .get(`/api/audit/export`, {      responseType: "blob" //服务器响应的数据类型,能够是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream',默认是'json'    })    .then((res) => {      if (!res) return;      const blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); // 结构一个blob对象来解决数据,并设置文件类型      if (window.navigator.msSaveOrOpenBlob) {        //兼容IE10        navigator.msSaveBlob(blob, this.filename);      } else {        const href = URL.createObjectURL(blob); //创立新的URL示意指定的blob对象        const a = document.createElement("a"); //创立a标签        a.style.display = "none";        a.href = href; // 指定下载链接        a.download = "test.xlsx"; //指定下载文件名        a.click(); //触发下载        URL.revokeObjectURL(a.href); //开释URL对象      }      // 这里也能够不创立a链接,间接window.open(href)也能下载    })    .catch((err) => {      console.log(err);    });

形式二:

应用 js-file-download 包

  1. get 申请
axios.get(`后端接口链接`, {  responseType: "blob" //返回的数据类型}).then((res) => {  fileDownload(res.data, "test111.xlsx");});
  1. post 申请
formData.value.pageNum = 1;formData.value.pageSize = 200;axios.post(`后端接口链接`, formData.value, {  responseType: "blob" //返回的数据类型}).then((res) => {  fileDownload(res.data, "test111.xlsx");});

2 文件名获取,以及乱码解决

https://www.jianshu.com/p/22d...

后端设置编码方式为 utf-8

fileName = URLEncoder.encode("中文excel文件名称", "UTF-8").replaceAll("\\+", "%20");

vue 前端:应用 decodeURIComponent 反编译中文文件题目

let dis = res.headers["content-disposition"];let filename = decodeURIComponent(dis.split("attachment;filename*=")[1]);

3 自适应 excel 宽度

https://chowdera.com/2022/02/...

https://www.codetd.com/en/art...

3.1 继承 AbstractColumnWidthStyleStrategy 实现一个宽度策略

这个宽度策略会依据题目的宽度或者内容的宽度设置题目的宽度。

PS:适当减少宽度,能防止数字显示为 * 的问题;防止工夫显示为 # 的问题

import com.alibaba.excel.enums.CellDataTypeEnum;import com.alibaba.excel.metadata.Head;import com.alibaba.excel.metadata.data.CellData;import com.alibaba.excel.metadata.data.WriteCellData;import com.alibaba.excel.write.metadata.holder.WriteSheetHolder;import com.alibaba.excel.write.style.column.AbstractColumnWidthStyleStrategy;import com.qunar.base.meerkat.util.DateUtil;import lombok.extern.slf4j.Slf4j;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;/** * easyExcel 自适应列宽 * */@Slf4jpublic class ExcelWidthStyleStrategy extends AbstractColumnWidthStyleStrategy {    private Map<Integer, Map<Integer, Integer>> CACHE = new HashMap<>();        // 适当减少宽度,能防止 数字显示为 * 的问题    public static final int DEFAULT = 2;    protected void setColumnWidth(WriteSheetHolder writeSheetHolder, List<WriteCellData<?>> cellDataList, Cell cell, Head head, Integer relativeRowIndex, 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<WriteCellData<?>> cellDataList, Cell cell, Boolean isHead) {        if (isHead) {            return cell.getStringCellValue().getBytes().length + DEFAULT;        } 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 + DEFAULT;                    case BOOLEAN:                        return cellData.getBooleanValue().toString().getBytes().length + DEFAULT;                    case NUMBER:                        return cellData.getNumberValue().toString().getBytes().length + DEFAULT;                    case DATE:                        return DateUtil.PATTERN_YYYY_MM_DD_HH_MM_SS.getBytes().length + DEFAULT;                    default:                        return -1;                }            }        }    }}

3.2 easyExcel 写入文件注册 handler

EasyExcel.write(response.getOutputStream(), DownloadData.class).registerWriteHandler(new ExcelWidthStyleStrategy()).sheet("模板").doWrite(downloadDataList);