vue和easy-excel导入使用，导出类型为xlsx

最新推荐文章于 2024-04-26 22:34:56 发布

tanghuan0827

最新推荐文章于 2024-04-26 22:34:56 发布

阅读量906

点赞数

分类专栏：前端 java 文章标签： vue.js java 前端

原文链接：https://www.cxyzjd.com/article/JasonZhang1416/108077619

版权

java 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

前端

19 篇文章 1 订阅

订阅专栏

一、java后端代码

	@PostMapping("/download")
    public void download(HttpServletResponse response) throws IOException {	
		response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        response.setCharacterEncoding("utf-8");
        // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
        String fileName = URLEncoder.encode("测试", "UTF-8").replaceAll("\\+", "%20");
        response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");
        ExcelWriterSheetBuilder sheet = EasyExcel.write(response.getOutputStream(), OneXlsDto.class)
                .autoCloseStream(Boolean.FALSE).registerWriteHandler(horizontalCellStyleStrategy).sheet("独立值集导入模板").doWrite(data());
	}
	
	private List<OneXlsDto> data() {
        List<OneXlsDto> list = ListUtils.newArrayList();
        for (int i = 0; i < 10; i++) {
            OneXlsDto data = new OneXlsDto();
            data.setField1("字符串" + i);

            list.add(data);
        }
        return list;
    }

OneXlsDto实体【日期格式设置 yyyy-MM-dd dataFormat=14 指的是，需要看另外一篇转载文章】

@Data
@HeadRowHeight(20)
@ColumnWidth(20)
public class OneXlsDto extends AeDTO implements Serializable {

    private static final long serialVersionUID = 1L;

    /**
     * 值集名称
     */
    @ExcelProperty(value="字段1")
    private String field1;

    @ExcelProperty(value="字段2")
    private String field2;

    @ExcelProperty(value="启用标识(Y/N)")
    private String enabledFlag;

    @ExcelProperty(value="起始日期")
    @DateTimeFormat("yyyy-MM-dd")
    @ContentStyle(dataFormat = 14)
    private Date startDate;


    @ExcelProperty(value = "失效日期")
    @DateTimeFormat("yyyy-MM-dd")
    @ContentStyle(dataFormat = 14)
    private Date expirationDate;

}

二、vue前端代码（js部分）

1 导出类型为 xlsx

【'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'】设置的

2 请求参数记得加下面一行，否则容易乱码

【responseType: 'blob'】

this.axios({
     method: 'post',
     url: '/urlPrefix/download',
     responseType: 'blob'
     	}).then(function(res) {
    let temp = res.headers['content-disposition']
        .split(';')[1]
        .split('filename=')[1] //从返回头取出文件名称
    let fileNameStr = unescape(decodeURI(temp)) //中文文件名需解码
    let fileName = fileNameStr.replace(/\"/g, '').replace(/\'/g, '')
    let blob = new Blob([res.data], {
        type:  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName)
    } else {
        var link = document.createElement('a')
        document.body.appendChild(link)
        link.href = window.URL.createObjectURL(blob)
        link.download = fileName
        link.click()
        //释放内存
        window.URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
	}
})

转载地址：

基于SpringBoot-Vue-EasyExcel实现的Excel文件导出+导入_JasonZhang1416的博客-程序员宅基地 - 程序员宅基地