下载文件--后端返回文件数据,前端怎么下载呢

问题:有个功能是将tabel数据导出,并且后端写了个接口,这个接口返回你要下载的excel文件数据了。前端请求接口就行,然后下载下来,但前端该怎么操作(发起请求呢)

javascript 复制代码
/**
 * 导出文件
 * @param {string} url - 导出文件的 API 地址
 * @param {Object} data - 导出文件的请求参数
 */
export function exportFile(url, data) {
  const reqData = {
    ...data,
    ...initReqData(),//一些必要固定参数
  };

  axios({
    url,
    baseURL: import.meta.env.VITE_BASE_URL,
    data: reqData,
    responseType: 'blob',//设置为'blob',表示期望服务器响应的数据类型为二进制大对象(Blob),这对于下载文件特别有用。
    method: 'post',
  }).then(res => {
    if (res.data.type === 'application/json') {
      throw res;
    }
    const link = document.createElement('a');
    const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
    link.style.display = 'none';
    link.href = URL.createObjectURL(blob);
    const contentDisposition = res.headers['content-disposition'];
    let needle = 'filename*=utf-8\'\'';
    let index = contentDisposition.indexOf(needle);
    if (index < 0) {
      needle = 'filename=';
      index = contentDisposition.indexOf(needle);
    }
    let fileName = contentDisposition.substring(index + needle.length);
    fileName = decodeURI(fileName);
    link.setAttribute('download', `${fileName}`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    message.success('导出成功');
  }).catch(error => {
    try {
      const reader = new FileReader();
      reader.readAsText(error.data, 'utf-8');
      reader.onload = () => {
        const errData = JSON.parse(reader.result);
        message.error(errData.msg);
      };
    } catch (e) {
      message.error('导出错误,请联系管理员');
    }
  });
}

请求发送

  1. 请求配置
    • url:请求的URL,这里假设它已经在外部定义好了。
    • baseURL:通过import.meta.env.VITE_BASE_URL获取基础URL,这是Vite环境变量的一种用法,用于在开发、测试和生产环境中配置不同的基础URL。
    • datareqData,这是要发送到服务器的数据。
    • responseType:设置为'blob',表示期望服务器响应的数据类型为二进制大对象(Blob),这对于下载文件特别有用。
    • method'post',表示这是一个POST请求。
  2. 请求发送:使用axios发送配置好的请求。

响应处理

  1. 检查响应类型
    • 首先,检查响应的Content-Type。如果响应类型是'application/json',则抛出异常,因为预期是下载文件而不是接收JSON数据。
  2. 处理文件下载
    • 创建一个Blob对象,将响应数据(res.data)作为其内容,并设置MIME类型为'application/vnd.ms-excel',这是Excel文件的MIME类型。
    • 创建一个隐藏的<a>标签,设置其href属性为Blob对象的URL(通过URL.createObjectURL(blob)生成),并设置download属性为文件名(从Content-Disposition响应头中提取)。
    • <a>标签添加到文档中,模拟点击以触发下载,然后立即从文档中移除该标签。
    • 显示"导出成功"的消息。

错误处理

  1. 捕获异常
    • 如果在下载过程中发生错误(如服务器返回JSON格式的错误信息),则尝试读取错误响应的data部分作为文本。
    • 使用FileReader读取响应数据,并将其解析为JSON对象。
    • 如果解析成功,则显示错误消息(errData.msg)。
    • 如果在读取或解析过程中发生任何异常,则显示一般的错误消息"导出错误,请联系管理员"。

部分代码解析:

主要用于从HTTP响应的Content-Disposition头部中提取文件名,并设置给一个<a>标签的download属性,以便在点击该链接时以下载的形式保存文件。下面是对这几部分代码的详细讲解:

1. 提取Content-Disposition头部

|---|------------------------------------------------------------------|
| | const contentDisposition = res.headers['content-disposition']; |

这行代码从HTTP响应的头部信息中获取Content-Disposition字段的值。这个字段通常用于指示响应的内容应该如何显示,对于文件下载来说,它还可能包含文件名。

2. 处理文件名编码

HTTP标准允许Content-Disposition中的文件名使用不同的编码方式,特别是当文件名包含非ASCII字符时。这里,代码首先尝试找到使用RFC 5987编码的文件名(即filename*=utf-8''这种格式),如果没有找到(indexOf返回-1),则回退到较旧的filename=格式。

|---|----------------------------------------------------|
| | let needle = 'filename*=utf-8\'\''; |
| | let index = contentDisposition.indexOf(needle); |
| | if (index < 0) { |
| | needle = 'filename='; |
| | index = contentDisposition.indexOf(needle); |
| | } |

  • needle变量用于存储要搜索的字符串(即文件名前的标识符)。
  • indexOf方法用于查找needlecontentDisposition字符串中的位置。
  • 如果找不到使用RFC 5987编码的文件名(index < 0),则更改needlefilename=并再次搜索。

3. 提取文件名

|---|-----------------------------------------------------------------------|
| | let fileName = contentDisposition.substring(index + needle.length); |

一旦找到了文件名的起始位置(index + needle.length),就使用substring方法从该位置开始提取剩余的字符串作为文件名。这包括了文件名本身以及可能存在的任何引号(如果使用的是filename=格式,则文件名可能会被引号包围)。

4. 解码文件名

|---|-----------------------------------|
| | fileName = decodeURI(fileName); |

由于文件名可能是经过URI编码的(特别是当包含特殊字符或空格时),因此使用decodeURI函数对其进行解码,以确保文件名在下载时正确显示。

5. 设置下载链接

|---|----------------------------------------------------|
| | link.setAttribute('download', `${fileName}`); |
| | document.body.appendChild(link); |
| | link.click(); |
| | document.body.removeChild(link); |

  • 使用setAttribute方法将解码后的文件名设置为<a>标签的download属性。这告诉浏览器,当用户点击该链接时,应以下载的形式保存内容,并使用指定的文件名。
  • <a>标签添加到文档的body中,以便可以触发其点击事件。
  • 调用click方法模拟点击事件,触发下载。
  • 下载完成后,立即从文档中移除<a>标签,以清理DOM。

这样,当用户通过这段代码触发下载时,浏览器会根据Content-Disposition头部中的信息(特别是文件名)来保存文件。

相关推荐
熊的猫27 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香2 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596932 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书