axios下载文件名乱码的原因及解决方法

引言

在使用 axios 进行文件下载时，有时候会遇到下载的文件名乱码的问题。本文将介绍这个问题产生的原因，并提供解决方法。

问题描述

当使用 axios 下载一个文件时，期望的行为是在保存文件时保留原始文件名。然而，有时候文件名会出现乱码的情况，如下所示：

axios.get('
  .then(response => {
    const contentDisposition = response.headers['content-disposition'];
    const filename = contentDisposition.split(';')[1].split('=')[1];
    const file = new Blob([response.data], { type: 'application/pdf' });
    const downloadUrl = URL.createObjectURL(file);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(downloadUrl);
  });

在这个示例中，我们尝试从服务器上下载一个名为 file.pdf 的文件。我们使用 response.headers['content-disposition'] 获取响应头中的 content-disposition 属性，并解析出文件名 filename。然后，我们创建一个下载链接，并设置 a.download = filename 来指定文件名。但有时候下载的文件名却是乱码的。

问题原因

文件名乱码问题的原因是服务器返回的 content-disposition 响应头中的文件名编码格式与浏览器的编码格式不一致。服务器返回的文件名编码格式通常是 ASCII 或 UTF-8，而浏览器默认使用的编码格式可能是操作系统的默认编码格式，如 GBK（在中国）或 Latin-1（在西方国家）。

由于编码格式不一致，浏览器解析文件名时会出现乱码。例如，当服务器返回的文件名编码格式是 UTF-8，而浏览器使用 GBK 编码格式时，就会导致乱码问题的发生。

解决方法

要解决文件名乱码的问题，我们需要对服务器返回的文件名进行正确的编码转换，以适应浏览器的编码格式。以下是一种解决方法：

axios.get(' { responseType: 'arraybuffer' })
  .then(response => {
    const contentDisposition = response.headers['content-disposition'];
    const encodedFilename = contentDisposition.split(';')[1].split('=')[1];
    const decodedFilename = decodeURIComponent(encodedFilename);
    const file = new Blob([response.data], { type: 'application/pdf' });
    const downloadUrl = URL.createObjectURL(file);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = decodedFilename;
    a.click();
    URL.revokeObjectURL(downloadUrl);
  });

在这个解决方法中，我们使用 decodeURIComponent() 函数对服务器返回的文件名进行解码，以获得正确的文件名。这样可以确保文件名在浏览器中显示正常。

解决方法验证

为了验证这个解决方法的有效性，我们可以创建一个简单的示例服务器来模拟文件下载，并返回一个包含非 ASCII 字符的文件名。

const express = require('express');
const app = express();

app.get('/file', (req, res) => {
  const filename = '文档.pdf';
  res.set('Content-Disposition', `attachment; filename="${filename}"`);
  res.send('file content');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在这个示例服务器中，我们使用 Express 创建了一个路由 /file，该路由返回一个名为 文档.pdf 的文件。我们使用 res.set() 设置了 Content-Disposition 响应头，其中包含了带有非 ASCII 字符的文件名。

使用上述的解决方法进行文件下载时，可以正确地显示文件名，并且不会出现乱码。

总结

通过对服务器返回的文件名进行正确的编码转换，我们可以解决 axios 下载文件时出现的文件名乱码问题。在实际开发中，我们应该根据服务器返回的编码格式进行相应的解码处理，以确保文件名可以在浏览器中正确显示。

stateDiagram
  [*] -->