使用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 要导出的图片字段:
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 给字段赋值
try {
ExportExcel exportExcel = new ExportExcel();
exportExcel.setImagePath(new URL("https//....远程地址"));
} catch (MalformedURLException e) {
e.printStackTrace();
}
1.3 写入数据
EasyExcel.write("test.xlsx", ExportExcel.class).sheet().doWrite(exportExcel);
2.后端返回乱码,文件下载后无法打开,提示已损坏
2.1 如果后端返回的是一堆乱码(blob),就需要前端修改一下文件下载的方法,参考链接:
http://t.csdnimg.cn/8s8GQ
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
export const exportExcelData = async (payload) => {
return api.securedAxios().get("/web/export", {
params: payload, responseType: 'blob'
});
};
如果有遇到类似的问题,欢迎留言关注