js中文件流下载导出excel文件方法_js 文档流下载后 xwl-CSDN博客

本文链接：https://blog.csdn.net/Wcharles666/article/details/95484795

博客探讨了如何从后台获取数据列表并将其导出为Excel文件。两种方法被提出：1) 后台提供Excel文件HTTP地址，前端直接下载，但会浪费服务器资源；2) 后台返回二进制文件流，前端解析并下载，节省服务器资源。文章包含针对这两种情况的解决方案。

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

需求：数据列表导出为excel文件，通过向后台请求接口，返回的结果一般有两种方式：

1. 后台返回excel文件http地址（后台会在服务器生成，前端请求url再下载一遍，浪费服务器资源，优点：前端处理方便）

2. 后台返回二进制文件流（后台不会再服务器生成文件，只需前台进行解析，不占用服务器资源）

代码

1.http地址形式

window.location.href="后台返回的地址"

2.二进制文件流形式

解决方案1

利用js-file-download 插件 
npm install js-file-download  
在用到的时候进行引入 
 
import fileDownload from "js-file-download";

然后调用
fileDownload(res.data, `违法详情${fileName}`);  // res.data为后台返回的二进制流，第二个参数为下载的文件名

最重要的一点：
这里使用axios请求，在header中添加
responseType: "blob" 或者 
responseType: "arraybuffer"
进行解析

在这里插入图片描述

解决方案2：
原生ajax请求

      var xhr = new XMLHttpRequest();
      var formData = new FormData();
      // 添加请求的参数
      formData.append("opUserName", $(".pUserName").val());
      formData.append("startTime", $(".startTime").val());
      formData.append("endTime", $(".endTime").val());
      formData.append("page", 1);
      // 添加请求的方式，地址
      xhr.open("POST", frs.urls + "sysoperation/exportOpJournal", true);
      // 设置responseType
      xhr.responseType = "blob";
      xhr.onload = function(e) {
        var content = xhr.response;
        // 组装a标签
        let timestamp = frs.getLocalTime(new Date());
        var elink = document.createElement("a");
        // 设置下载文件名
        elink.download = "操作日志下载" + timestamp + ".xlsx";
        elink.style.display = "none";
        let blob = new Blob([content]);
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        // 模拟点击事件
        elink.click();
        document.body.removeChild(elink);
      };
      xhr.send(formData);