前端导出excel文件，本地下载后无法打开或格式错误

项目场景：

在前端开发中，经常需要从后端获取数据并将其保存为本地文件，比如Excel文件。但在处理这类请求时，有时会遇到下载后的文件无法正常打开的问题。正巧再次遇到了类似的问题，并经过一系列排查找到了解决方案，简单记录一下

问题描述

当后端返回Excel格式的数据时，前端通过接口请求并尝试下载到本地。虽然请求成功并且下载完成，但在本地打开文件时却失败了。根据错误提示，我开始怀疑下载的数据格式可能存在问题。

原因分析：

检查后端返回的数据： 首先，我查看了后端返回的数据，发现数据格式看起来是正常的，Excel文件的内容在浏览器中也显示得没有问题。
配置responseType： 接着，我检查了前端请求的配置，确保已经设置了responseType: "blob"。这是因为当后端返回的是二进制数据时，我们需要告诉前端如何处理这种类型的数据。
下载后的文件内容： 下载完成后，我打开了文件，发现里面显示的是[object Object]。这让我感到困惑，因为后端返回的数据看起来是正常的。

1.后端返回的数据在浏览器查看如下(返回的数据正常）：

2.在请求中需要如下配置`responseType: "blob"

	headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    },
    responseType: "blob"

3.成功下载，打开文件后内容为空

经过简单的分析，我猜测下载的数据之所以显示[object Object]，可能是因为我在导出数据时直接将整个响应体对象（即response）导出了，而实际上正确的数据应该是response.data。在设置了responseType: "blob"之后，我们应该从response.data中获取二进制数据。

解决方案：

• 确保设置responseType：在发起接口请求时，一定要确保设置了responseType: "blob"，这样前端才能正确地处理后端返回的二进制数据
• 正确获取数据：在导出数据时，应该使用response.data来获取二进制数据，而不是直接使用response
• 检查响应拦截：如果你的项目中使用了响应拦截的公共处理方法，那么需要特别注意确保在下载文件时能够正确地获取到数据，避免因为拦截器处理不当而导致数据取错。
  
• 处理文件名：如果后端在响应头中配置了文件名（通过content-disposition），你可以通过处理response.headers["content-disposition"]来获取这个文件名，并在前端下载时给文件命名，这样下载的文件就更符合预期了

完整操作：

// 1.引入
	import { saveAs } from "file-saver";

// 2.接口定义
	request({
	    url: `........`,
	    method: 'post',
	    headers: {
	      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
	    },
	    responseType: "blob",
	    data: ''
	 })

// 3.请求并下载
	// 导出
    export2excel() {
      let params = { ...... };
      exportReportList(params).then(response => {
        // 检查Content-Disposition头以获取文件名：如果后端配置了文件名
        const contentDisposition = response.headers["content-disposition"];
        const filename = contentDisposition && contentDisposition.includes("filename=")
            ? contentDisposition.split("=")[1].trim().replace(/["']/g, "")
            : "fileneme.xlsx";
        // 使用FileSaver保存文件
        saveAs( new Blob([response.data], { type: "application/vnd.ms-excel;charset=utf-8" }), filename );
      });
    }

总结

在处理前端下载文件的问题时，我们需要注意数据的格式、响应类型的设置以及如何正确地获取数据。同时，还需要关注项目中可能存在的响应拦截器，确保它们不会影响到我们的下载逻辑。通过仔细地排查和分析，我们可以找到问题的根源并解决它。