前端实现导出下载excel文件(Blob数据类型)

最新推荐文章于 2025-03-14 17:51:05 发布

琢鸣

最新推荐文章于 2025-03-14 17:51:05 发布

阅读量7.3k

点赞数 12

分类专栏：【vue实用插件及技巧】文章标签：前端 javascript vue.js excel

本文链接：https://blog.csdn.net/G_ing/article/details/128170853

版权

【vue实用插件及技巧】专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在前端处理后端返回的Blob数据类型，包括将其转换为文件并实现下载功能。

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

场景

在前端的各种后台管理系统中，往往都会存在大量数据的展示，分析等，一般这种项目都会有数据导出功能，在开发中，一般都是后端返回Blob数据类型，也就是一个二进制对象，那么本篇文章就是讲解前端拿到Blob数据后该怎么处理。

一.Blob

这里简单说一下Blob，全称Binary large Object，二进制大对象(BLOB)是一种可以存储二进制对象或数据的数据类型。

前端中Blob对象的构造函数语法：

new Blob(array, options)

参数array是一个数据序列即数组，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers等。
参数options：用于指定将要放入Blob中的数据的类型(MIME)

二.代码

1.在封装请求的时候一定要记得加上responseType。

   /**
     * 导出exportExcel
     * @param data
     */
    public static exportExcel(data) {
        return axios({
            url: ``,
            method: 'get',
            params: data,
            responseType: "blob"//定义好返回的数据类型
        });
    }

这里就按自己封装的请求来就好，加上 responseType: "blob"即可。

2.拿到Blob数据类型转化为文件并下载。

/**
 * 导出文件下载方法
 * @param data 这个参数就是从接口返回的Blob二进制文件流
 */
const exportFile= (data) => {
      const blob = new Blob([data], {type: "application/vnd.ms-excel;charset=utf-8"});
      const fileName = "文件名" + new Date().getTime() + ".xls";//我这里是文件名加上时间，可以根据自己需求来
      const elink = document.createElement("a"); // 创建a标签
      elink.download = fileName; // 为a标签添加download属性  //命名下载名称
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click(); // 点击下载
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink); // 释放标签
}

这里的话可以根据自己需求封装为公共方法，将文件名也设为入参，二进制文件流导出下载为excel表格方法总体就是这样。