说一下ajax请求下Excel文件踩的坑

最新推荐文章于 2021-08-05 11:50:19 发布

胖鸡。

最新推荐文章于 2021-08-05 11:50:19 发布

阅读量881

点赞数 2

分类专栏： java 文章标签： excel 文件下载 ajax axios

本文链接：https://blog.youkuaiyun.com/qq_43299794/article/details/96151949

版权

java 专栏收录该内容

4 篇文章

订阅专栏

当Ajax请求返回Excel文件时，由于它只能解析JSON和XML格式，导致二进制流无法正确显示。为解决这个问题，可以使用Blob对象来接收和处理返回的二进制数据。Blob是一个用于存储二进制数据的容器，支持设置MIME类型。通过创建Blob对象，将后端返回的二进制流转换成可下载的文件。后端需要提供正确的响应头，而前端使用Ajax时，利用Blob和URL.createObjectURL()方法生成临时下载链接，实现文件下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端 ajax , axios 请求 Excel 文件下载

说一下ajax请求下Excel文件踩的坑
当接口返回的是文件时, ajax解析给我们的是一个二进制流,ajax识别解析不了这个类型的数据,会直接把它打开展示, 然后就会出现下面这种情况.

然后我在就各种百度, 主要就是因为ajax只支持解析Json和XML格式的数据; 最后的解决办法就是在前端用一个二进制对象接收包裹这个返回的二进制流

Blob

Blob(binary large object)，二进制类文件大对象，是一个可以存储二进制文件的“容器”，HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIME类型。File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
new Blob([data], {type: “application/octet-binary”})

Blob构造函数接受两个参数，第一个参数是一个包含实际数据的数组，第二个参数是数据的MIME类型。
Blob.size
blob对象的数据大小
Blob.type
表示blob对象所包含数据的MIME类型。如果实例化时未指明类型，则该值为空字符串。

后端代码

@GetMapping(value = "/export")
    public void excelExport(HttpServletResponse response) {

        try {
            OutputStream out = response.getOutputStream();
            String fileName = "item表格";
            ExcelWriter writer = new ExcelWriter(out, ExcelTypeEnum.XLSX, false);
            Sheet sheet = new Sheet(1, 0);
            List<List<String>> data = new ArrayList<>();
            for (int i = 0; i < 100; i++) {
                List<String> item = new ArrayList<>();
                item.add("item0" + i);
                item.add("item1" + i);
                item.add("item2" + i);
                data.add(item);
            }
            sheet.setAutoWidth(true);
            writer.write0(data, sheet);
            response.setCharacterEncoding("UTF-8");
            response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName + ".xlsx", "UTF-8"));
            //xlsx文件标记
            response.setHeader("Content-Type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
            writer.finish();
            out.close();
        }catch (Exception e){
            log.error("==========",e);
        }
  }

ajax 请求方式

this.$axios({
  method:'get',
  url:this.$store.getters.get_url_index+'api/excel/export',
  headers:{"Authorization":window.localStorage.token,"Content-Type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"},
  params:data,
  responseType:'blob '
}).then(function(res) {
  let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
    let link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = "表格.xlsx";
    link.click();
    link.remove();
}).catch(function(res){
  console.log(res);
});