在Vue.js应用中，使用axios库来实现POST方式获取二进制流并下载文件是一个常见的需求，特别是当需要从服务器获取如Excel、PDF等特定格式的文件时。本篇文章将详细解析这一过程，并提供相关代码实例。
我们来看如何在Vue中配置axios来接收二进制流。在发送POST请求时，需要设置`responseType`为`blob`，这样axios将会处理返回的二进制数据。例如：
```javascript
axios.post({
url: 'your-api-url',
method: 'post',
responseType: 'blob'
}).then((res) => {
// 处理二进制流
});
```
当服务器返回二进制流时，我们需要将其转化为可下载的文件。这通常涉及到FileReader API，用来读取Blob对象。我们可以创建一个FileReader实例，然后使用`readAsDataURL`方法读取Blob数据。当读取完成后，FileReader的`onload`事件会被触发，此时我们可以获取到一个data URL，这个URL可以被用作下载链接：
```javascript
let blob = res.data;
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e) => {
let a = document.createElement('a');
a.download = 'fileName.xlsx';
a.href = e.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
```
在这个过程中，可能会遇到一个问题，即无法通过axios的`res.headers`获取到服务器返回的`Content-Disposition`头，该头包含了文件的实际名称。这是因为浏览器的同源策略限制了对某些HTTP响应头的访问。为了解决这个问题，后端需要设置`Access-Control-Expose-Headers`，将`Content-Disposition`包含在内：
```java
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
```
如果即使这样仍然无法获取，后端可以考虑直接在响应体中提供一个名为`fileName`的字段，以JSON形式传递文件名。
在Vue项目中，为了方便全局使用axios，可以将axios实例注入到Vue的原型链上，如下所示：
```javascript
import axios from 'axios';
Vue.prototype.$axios = axios;
```
这样，在任何Vue组件中都可以直接通过`this.$axios`调用axios的方法。以下是一个简单的例子：
```javascript
this.$axios.post('http://ai.yiche.com/web/ability/nlu/standardTokenizer', {
text: "动效如果有跟评审结论有出入的地方或者不清楚的地方，随时沟通哈~"
}).then((res) => {
console.log(res.data);
}).catch((err) => {
if (err.response) {
console.log(err.response);
}
});
```
通过设置axios的`responseType`为`blob`，配合FileReader API，我们可以成功地处理服务器返回的二进制流并实现文件下载。同时，需要注意浏览器的跨域策略对HTTP响应头的影响，确保后端正确设置`Access-Control-Expose-Headers`或提供额外的文件名字段。在Vue项目中，通过将axios注入到原型链，可以更方便地在各个组件中使用。
- 1
- 2
- 3
前往页