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

问题:有个功能是将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头部中的信息(特别是文件名)来保存文件。

相关推荐
gqkmiss16 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃22 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰26 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye33 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm35 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生2 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互