axios blob 文件名乱码

解决axios blob文件名乱码问题

问题描述

在使用axios下载文件时，有时候会遇到文件名乱码的问题，特别是对于中文文件名。这会影响用户体验，因此我们需要解决这个问题。

解决步骤

下面是解决这个问题的步骤：

pie
    title 文件名乱码问题解决步骤
    "Step 1" : 了解问题
    "Step 2" : 使用responseType: 'blob'获取文件
    "Step 3" : 处理文件名
    "Step 4" : 下载文件

Step 1: 了解问题

在使用axios下载文件时，如果不指定responseType为'blob'，那么文件名可能会出现乱码。

Step 2: 使用responseType: 'blob'获取文件

在进行文件下载请求时，需要设置responseType为'blob'，这样可以确保下载的文件是二进制格式，而不是字符串。

```javascript
axios.get(' {
  responseType: 'blob'
})
.then(response => {
  // 处理文件
})
.catch(error => {
  console.error('下载文件失败', error);
});

Step 3: 处理文件名

在处理文件之前，我们需要获取文件名，并进行处理，确保文件名不会乱码。

```javascript
const contentDisposition = response.headers['content-disposition'];
const fileName = decodeURI(contentDisposition.split('filename=')[1]);

Step 4: 下载文件

最后，我们可以通过创建一个a标签，将blob对象转换为url，然后实现文件下载。

```javascript
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();

总结

通过以上步骤，我们可以解决axios下载文件时文件名乱码的问题。记住要设置responseType为'blob'，并对文件名进行适当处理，确保用户可以正确下载文件并查看文件名。祝你成功！

引用形式的描述信息

根据[axios官方文档](

---

在这篇文章中，我们详细介绍了如何解决axios下载文件时文件名乱码的问题，从了解问题到实际处理方法，希望对你有所帮助。记住要仔细阅读每一步的代码，理解其作用，这样在遇到类似问题时能够迅速解决。加油！