如何详细实现前端利用axios下载文件的功能？

本文共计1305个文字，预计阅读时间需要6分钟。

目录

1.需求描述

2.问题分析

3.解决方案

4.代码实现

总结

1.需求描述

在前后端分离的开发项目中，前端部分无需使用Vue或React等框架，所有HTTP请求通过Ajax进行异步调用。以下是对该需求的详细描述：

2.问题分析

前端开发中，选择合适的框架和请求方式对开发效率和用户体验至关重要。本方案旨在探讨在不使用Vue或React的情况下，如何实现高效的前端开发。

3.解决方案

前端使用原生JavaScript进行开发，通过Ajax实现异步HTTP请求。具体步骤如下： a. 使用XMLHttpRequest或fetch API发送HTTP请求； b. 在请求成功后处理响应数据； c. 在请求失败时进行错误处理。

4.代码实现

以下是一个简单的Ajax请求示例，用于获取数据并展示在页面上：javascriptfunction fetchData(url) { fetch(url) .then(response=> { if (response.ok) { return response.json(); } else { throw new Error('Network response was not ok.'); } }) .then(data=> { console.log(data); }) .catch(error=> { console.error('There has been a problem with your fetch operation:', error); });}总结本方案在不使用Vue或React的情况下，通过原生JavaScript和Ajax实现前后端分离项目的前端开发。这种方式具有以下优势： - 灵活度高，可自由选择合适的开发方式； - 开发效率高，易于维护和扩展。

目录

• 1、需求描述
• 2、问题分析
• 3、解决方案
• 4、代码实现
• 总结

1、需求描述

在前后端分离开发的项目中，前端无论使用Vue或React哪种框架，发送HTTP请求都会使用Ajax异步请求的方式。在很多项目中都会选择使用 axios 发送请求。但是在使用 axios 实现下载功能时，往往会出现以下问题。

当前端直接使用 axios 去请求下载文件的 api 接口时，状态码返回200，但是获取的数据却是一堆乱码，效果如下：

2、问题分析

下载其实是浏览器的内置事件，浏览器的 GET请求（frame、a）、 POST请求（form）具有如下特点：

• response 会交由浏览器处理；
• response 内容可以为二进制文件、字符串等。

但是AJAX请求不一样：

• response 会交由 Javascript 处理；
• response 内容只能接收字符串才能继续处理。

因此，AJAX本身无法触发浏览器的下载功能。

3、解决方案

要在 axios 的 config 配置 responseType: ‘blob’ （非常关键），服务端读取文件，以 content-type: ‘application/octet-stream’ 的格式返回前端，前端接收到数据后使用 Blob 来接收数据，并且创建a标签进行下载。

一个对象的类型取决于 responseType 的值，当值为 “blob”时表示 response 是一个包含二进制数据的 Blob 对象。
在使用 axios 发起请求前，首先了解一下 responseType 这个属性是如何在 axios 中使用的。以 axios 最常用的 get 和 post 请求为例，这两种请求方式在传递参数的时候也是不同的：
在get请求当中，config 是第二个参数，而到了 post 里 config 变成了第三个参数，这是传递 responseType 第一个需要注意的地方。

4、代码实现

后端实现以 express 为例：

// 这里以express举例 const fs = require('fs') const express = require('express') const bodyParser = require('body-parser') const app = express() app.use(bodyParser.urlencoded({extended: false})) app.use(bodyParser.json()) // 以post提交举例 app.post('/info/download', function(req, res) { const filePath = './myfile/test.zip' const fileName = 'test.zip' res.set({ 'content-type': 'application/octet-stream', 'content-disposition': 'attachment;filename=' + encodeURI(fileName) }) fs.createReadStream(filePath).pipe(res) }) app.listen(3000)

前端在使用 axios 请求下载文件 api 接口时，一定要区分不同请求方法的使用，语法如下：

// axios设置reponseType的方式应该类似下面 const url = '/info/download' // get、delete、head 等请求 axios.get(url, {params: {}, responseType: 'blob'}) .then((res) => {}) .catch((err) => {}) // post、put、patch 等请求 axios.post(url, {...params}, {responseType: 'blob'}) .then((res) => {}) .catch((err) => {})

前端解析数据流，主要使用 Blob 对象来进行接收，示例代码如下：

// 以之前的post请求举例 axios.post(url, {...someData}, {responseType: 'blob'}) .then((res) => { const { data, headers } = res const fileName = headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1') // 此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理 //const blob = new Blob([JSON.stringify(data)], ...) const blob = new Blob([data], {type: headers['content-type']}) let dom = document.createElement('a') let url = window.URL.createObjectURL(blob) dom.href = url dom.download = decodeURI(fileName) dom.style.display = 'none' document.body.appendChild(dom) dom.click() dom.parentNode.removeChild(dom) window.URL.revokeObjectURL(url) }).catch((err) => {})

如果后台返回的流文件是一张图片的话，前端需要将这张图片直接展示出来，例如登录时的图片验证码，示例代码如下：

axios.post(url, {...someData}, {responseType: 'blob'}) .then((res) => { const { data } = res const reader = new FileReader() reader.readAsDataURL(data) reader.onload = (ev) => { const img = new Image() img.src = ev.target.result document.body.appendChild(img) } }).catch((err) => {})

总结

到此这篇关于前端使用axios实现下载文件功能的文章就介绍到这了,更多相关axios下载文件功能内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！