Vue el-table表格导出为Excel，调用导出接口返回内容有的为Blob对象，有的直接显示其内部的二进制数据的解决方法

原创已于 2025-04-24 10:36:27 修改 · 950 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #excel #javascript

于 2025-04-23 17:37:53 首次发布

exportExcelReturned 为导出接口，返回的res内容为：

如果是Blob对象，直接打印res为：

如果不是Blob对象，会直接输出内容：

利用URL.createObjectURL()方法为a标签生成就会报错

为什么打印出来的 res 是 Blob 对象

正常的返回：在正常的文件下载请求中，后端返回文件的二进制数据，前端将其作为 Blob 对象处理。这种情况下，Blob 对象的 size 和 type 属性分别表示文件的大小和 MIME 类型。

二进制数据的表示：Blob 对象是处理二进制数据的一种方式，它可以表示原始数据，例如文件内容。当你打印 Blob 对象时，它会显示其 size 和 type 属性，而不是直接显示其内部的二进制数据。

如何处理 Blob 对象：

 const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
 console.log(blob,'blob')

写一个公共的js导出方法，可以方法文件夹utils下

export function resolveBlob(res,fileName) {
  console.log(res,'res')
  const link = document.createElement("a"); // 通过a标签的形式
  link.style.display = "none";
  link.href = URL.createObjectURL(res); // 利用URL.createObjectURL()方法为a标签生成blob URL
  link.setAttribute("download", fileName); // 定义文件名
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

在模版导出功能中调用

   downloadOrderList() {
      this.downloadLoading = true;
      exportExcelReturned({  //导出接口，可以换成后端给的接口
        projectNo: this.projectNo,
      })
        .then((res) => {
          // 检查 res 是否为 Blob 对象
          if (res instanceof Blob) {
            resolveBlob(res, "文件名.xls");
          } else {
            console.error('Response is not a Blob object');
             //将直接输出的二进制内容创建为blob对象
            const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
            console.log(blob,'blob')
            resolveBlob(blob, "文件名.xls");
          }
          this.downloadLoading = false;
        })
        .catch((error) => {
          console.error('Error downloading file:', error);
          this.downloadLoading = false;
        });
    }

总结：

二进制数据在网页上直接显示通常是由于以下原因造成的：

1. MIME 类型配置错误

后端返回错误的 Content-Type：如果后端返回的 Content-Type 是文本类型（如 text/plain、text/html），浏览器会尝试将二进制数据当作文本解析并显示，导致乱码。

前端错误处理：前端代码可能没有正确检查响应的 Content-Type，而是直接将响应内容当作文本处理。

2. 数据处理方式不当

直接渲染二进制数据：如果前端代码直接将二进制数据插入到页面的 DOM 中（例如通过 innerHTML 或 textContent），浏览器会将其当作文本解析，导致乱码。

错误的响应处理：使用 fetch 或其他 HTTP 客户端库时，错误地使用了 response.text() 方法来处理二进制数据，而不是使用 response.blob() 或 response.arrayBuffer()。

3. 编码问题

字符编码错误：如果二进制数据被错误地编码为某种字符集（如 UTF-8、Latin-1），浏览器会尝试以该字符集解析数据，导致乱码。

数据传输错误：在数据传输过程中，如果编码和解码不一致，也可能导致乱码。

4. 浏览器行为

默认行为：某些浏览器在遇到未知或不支持的 MIME 类型时，可能会尝试以文本方式解析内容。

插件或扩展影响：浏览器插件或扩展可能会修改页面内容或响应处理方式，导致二进制数据被错误地显示。

解决方法：

正确的 Content-Type：后端应返回正确的 Content-Type，例如对于 Excel 文件，应返回 application/vnd.ms-excel 或 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet。

正确处理响应：前端应根据 Content-Type 使用适当的方法处理响应。对于二进制文件，使用 response.blob() 或 response.arrayBuffer()。

避免直接渲染二进制数据：不要直接将二进制数据插入到页面中，应使用适当的 API（如 Blob 和 URL.createObjectURL()）来处理文件下载。

验证数据完整性：通过哈希值、文件签名等方法验证数据完整性，确保文件未损坏。