使用java和react关于EasyExcel导出图片的问题，文件打开提示已损坏

news/2024/6/15 12:02:57 标签: java, react.js

javareactEasyExcel_0">使用java和react关于EasyExcel导出图片的问题，文件打开提示已损坏

这是alibaba开放的一个导出工具，便捷好用，参考官方文档：
https://easyexcel.opensource.alibaba.com/docs/current/quickstart/write#%E5%9B%BE%E7%89%87%E5%AF%BC%E5%87%BA

1.先说一下EasyExcel导出图片，这里主要说一下导出远程图片，其他的后面再补充
1.1 要导出的图片字段：

java">import com.alibaba.excel.annotation.ExcelProperty;
import com.alibaba.excel.annotation.write.style.ColumnWidth;
import com.alibaba.excel.annotation.write.style.ContentRowHeight;
import com.alibaba.excel.converters.url.UrlImageConverter;
import lombok.Data;

import java.net.URL;

@Data
@ContentRowHeight(40)
@ColumnWidth(25)
public class ExportExcel {
    @ExcelProperty(value = "Event Photo", converter = UrlImageConverter.class)
    private URL imagePath;
}

1.2 给字段赋值

java">try {
	ExportExcel exportExcel = new ExportExcel();
    exportExcel.setImagePath(new URL("https//....远程地址"));
} catch (MalformedURLException e) {
    e.printStackTrace();
}

1.3 写入数据

java">EasyExcel.write("test.xlsx", ExportExcel.class).sheet().doWrite(exportExcel);

2.后端返回乱码，文件下载后无法打开，提示已损坏
2.1 如果后端返回的是一堆乱码（blob），就需要前端修改一下文件下载的方法，参考链接：
http://t.csdnimg.cn/8s8GQ

java">import { request } from '@/utils/axios'
// 导出Excel公用方法
export function exportMethod(data: any) {
    return request({
        method: data.method,
        url: `${data.url}${data.params ? '?' + data.params : ''}`,
        responseType: 'blob',
        headers: {
            'Content-Type': 'application/json'
        }
    }).then((res) => {
        // console.log('明细导出')
        const link = document.createElement('a')
        let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
 
        // link.download = res.headers['content-disposition'] //下载后文件名
        link.download = data.fileName //下载的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }).catch(error => {
        console.log(error)
    })
}

2.2 此时文件可以正常下载了，但是用office或者wps打开时提示已损坏
解决：前端请求导出接口后，增加返回类型 responseType: ‘blob’
参考链接：http://t.csdnimg.cn/JeIpa
在这里插入图片描述

java">export const exportExcelData = async (payload) => {
  return api.securedAxios().get("/web/export", {
    params: payload, responseType: 'blob'
  });
};