前端下载文件流，设置返回值类型responseType:‘blob‘无效的问题，用了mock之后，下载不起作用

参考链接：https://blog.csdn.net/weixin_46872121/article/details/135616496

解决办法一：也是最优解

// mock/index.js
import Mock from 'mockjs';

// 使用Mock.js创建一个10条记录的模拟的数据集
const exportData = Mock.mock({
    'data|10': [{
        'id|+1': 1,//自增
        'labelname': '九资'
        '金额|500-50000': 1, //随机生成500-50000随机数 
        '状态|0-1': 1
    }]
});

// 拦截对/api/export的GET请求
Mock.mock('/api/export', 'get', () => {
    return {
        status: 200,
        data: exportData.data
    };
});

===使用===
<template>
  <!-- 导出按钮 -->
  <button @click="exportData">导出数据</button>
</template>

<script>
export default {
  methods: {
    async exportData() {
      try {
        // 发起GET请求以获取模拟数据
        const response = await fetch('/api/export');
        const result = await response.json(); // 解析响应为JSON
        const data = result.data; // 获取数据部分
//主要是下面这块代码，其他都一样
        // 将数据转换为CSV格式
        const csvContent = 'data:text/csv;charset=utf-8,'
          + data.map(e => Object.values(e).join(",")).join("\n");

        // 创建一个隐藏的下载链接
        const encodedUri = encodeURI(csvContent);
        const link = document.createElement("a");
        link.setAttribute("href", encodedUri); // 设置链接的href为CSV数据
        link.setAttribute("download", "export_data.csv"); // 设置下载文件名
        document.body.appendChild(link); // 将链接添加到文档中

        // 程序化点击下载链接以触发下载
        link.click();
        document.body.removeChild(link); // 下载完成后移除链接
      } catch (error) {
        console.error('导出失败:', error); // 捕获并打印错误
      }
    }
  }
}
</script>

 

解决办法二：https://blog.csdn.net/wtd183833501176/article/details/135241930

解决办法二:但是这种办法有缺陷，比如服务器自动打包，不用本地的node-modules，还有这个改了所有mock数据就不起作用了 报接口错误

项目中有mock又有导出,我之前写的导出都好好地,后来发现不能用了???太奇怪了,后来排查了好久,发现是mock底层对导出会有拦截,变成乱码,解决方法:修改mock底层代码即可:

找到node_modules中的mockjs,

打开mockjs,找到dist,

打开dist,点进mock.js

在mock.js中的八千三百多行有这个代码:

// 原生 XHR

                    if (!this.match) {

                        this.custom.xhr.send(data)

                        return

                    }

把它修改为:

// 原生 XHR

                    if (!this.match) {

                        this.custom.xhr.responseType = this.responseType

                        this.custom.xhr.send(data)

                        return

                    }

关闭项目,重新启动,就可以正常导出了,2023.12.27特此记录
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/wtd183833501176/article/details/135241930

 

前言：
本是一个非常简单的请求，即是下载文件。通常的做法如下：

1.前端通过Vue Axios向后端请求，同时在请求中设置响应体为Blob格式。

2.后端相应前端的请求，同时返回Blob格式的文件给到前端（如果没有步骤1设置响应体，则后端返回的是一个文件流，前端）

3.前端创建a标签进行下载

提示：如果后端返回的是文件的地址，那么前端可以直接通过window.location.href加文件路径即可下载文件。但是如果后台返回的是文件流，那么前端就需要做一些处理。处理的核心也是将文件流转成文件，然后使用a标签模拟点击下载。

 

 

找出问题 && 解决问题
我遇到的问题也是我想写篇文章记录一下的原因，因为下载文件这样的需求我都写烂了都，觉得这是得心应手的事情，在跟后端对接的时候，我非常坚定是后台返回流有问题（后面打脸了...）

这里我贴上我下载文件实现代码：

1.请求API

 

 

重点设置： responseType: 'blob'

2.封装的异步请求

 

 

3.调用接口，拿到返回值，模拟超链接点击下载文件

 

 

以上步骤似乎感觉是妥妥的了，但是我在自测的时候，一整个人蒙住，文件直接是打不开

 

 

然后我看控制台的输出，一看，不对劲啊，经过转换应该返回正常的blob格式才对，却是如下：

 

正式因为如此，导致下载下来的是一个无效的文件。

然后开始进一步的排查，代码都被我看烂了，也没看出来哪里会不对劲，各种百度也都试了，就是没有发现有什么问题。最后也是很突然的，我看到有个博主的文章，真的起到醍醐灌顶的作用，文章其中一句“mock模块会影响原生的ajax请求，使得服务器返回的blob类型变成乱码”，我才惊愕，因为我在项目中却是用到了mock，打开控制台发现，mockjs初始化的时候给拦截响应设置了responseType:''，证据如下：

 

 

 

 

 

终于找到原因了，同时把mock注释掉就可以了。真的是怎么也没有想到是mock模块影响了，可是花了好长一段时间去排查这个问题呢，解决了就好呀！！

下面是正常后拿到的数据格式：

 

 

优化
tip：我们可以把模拟a标签下载文件这个逻辑封装起来，如果后面又下载文件的需求的时候，可以直接拿来用即可。

1.封装：获取文件流转成文件，并模拟点击该文件，实现下载

​​​​​​​

 

2.使用

 

 

学学学无止境
关注

————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_46872121/article/details/135616496