下载导出文件，处理二进制文件

最新推荐文章于 2025-10-10 12:35:04 发布

原创

最新推荐文章于 2025-10-10 12:35:04 发布 · 664 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#axios导出excel #二进制流下载 #前端导出excel

本文介绍了一种在前端处理从后端接收的二进制流并将其下载为Excel文件的方法。通过使用Blob对象和URL.createObjectURL()，结合HTML的a标签，实现了将服务器返回的二进制数据流转换并下载为指定文件格式的功能。

1.在做一些管理后台项目中，很多表格，需要导出excel的功能；但是很多的后端的哥们，返回的是二进制流文件，这里需要咱们自己处理一下了。

话不多说上代码：这里的客户端http请求用的是axios

//处理下载流
    const download = (content, fileName) => {
      const blob = new Blob([content]); 
      //创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
      const url = window.URL.createObjectURL(blob); 
      //URL.createObjectURL(object)表示生成一个File对象或Blob对象
      let dom = document.createElement("a"); 
      //设置一个隐藏的a标签，href为输出流，设置download
      dom.style.display = "none";
      dom.href = url;
      dom.setAttribute("download", fileName); 
      //指示浏览器下载url,而不是导航到它；因此将提示用户将其保存为本地文件
      document.body.appendChild(dom);
      dom.click();
    };

// 下载请求

           <Button
            type="primary"
            onClick={() => {
              axios({
                method: "get", //请求方式
                url: `${Storage.get("gzhhost")}/blacklist-download/blacklist`,
                headers: {
                  token: Storage.get("Authorization"),

最低0.47元/天解锁文章