乐趣区

关于全栈:vue下载excel以及自适应表格宽度前后端

jiezi

本文应用 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 自适应列宽
 *
 */
@Slf4j
public 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);
退出移动版