使用 Axios 下载 XLSX 文件并解决提示“文件已损坏”的问题

在 Web 开发中，我们常常需要通过网络请求来下载文件，尤其是 XLSX 格式的 Excel 文件。使用 Axios 下载 XLSX 文件时，有时可能会遇到文件损坏的问题。本文将为您逐步讲解如何安全、正确地下载 XLSX 文件，并避免损坏的提示。以下是整个流程的概述。

1. 整体流程

以下表格展示了实现下载 XLSX 文件的步骤：

步骤 描述
1 安装 Axios 和 FileSaver.js
2 创建 Axios 请求
3 处理响应数据
4 使用 FileSaver.js 保存文件
5 处理错误

2. 步骤详细说明

第一步：安装 Axios 和 FileSaver.js

在开始之前，确保你已经安装了 Axios 和 FileSaver.js。通过 npm 安装：

npm install axios file-saver

这两者分别用于发送 HTTP 请求和保存文件。

第二步：创建 Axios 请求

创建 Axios 请求以获取 XLSX 文件。使用 responseType: 'blob' 来确保返回的数据被作为 Blob 对象处理。

import axios from 'axios';

// 创建请求方法
const downloadXLSX = async () => {
    try {
        const response = await axios.get('链接到你的Excel文件', {
            responseType: 'blob'  // 重要：设定响应类型为 Blob
        });
        // 继续处理响应
    } catch (error) {
        console.error('下载失败：', error);
    }
};

第三步：处理响应数据

在获取到 Blob 对象后，我们可以使用 FileSaver 来保存它。

import { saveAs } from 'file-saver';

const downloadXLSX = async () => {
    try {
        const response = await axios.get('链接到你的Excel文件', {
            responseType: 'blob'  // 重要：设定响应类型为 Blob
        });
        
        // 创建一个新的 Blob 对象
        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        
        // 调用 FileSaver 保存文件
        saveAs(blob, 'downloaded-file.xlsx');  // 将文件命名为 downloaded-file.xlsx
    } catch (error) {
        console.error('下载失败：', error);
    }
};

第四步：使用 FileSaver.js 保存文件

在上一步中，我们已经展示了如何使用 FileSaver.js 来保存文件。

第五步：处理错误

出于考虑到用户体验，我们应该提供错误处理来应对可能出现的问题。

const downloadXLSX = async () => {
    try {
        const response = await axios.get('链接到你的Excel文件', {
            responseType: 'blob'
        });
        
        const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        saveAs(blob, 'downloaded-file.xlsx');
    } catch (error) {
        // 如果响应不成功的话
        if (error.response) {
            console.error('服务器返回的状态码：', error.response.status);
            alert('下载失败，请检查文件链接是否正确。');
        } else {
            console.error('请求失败：', error.message);
            alert('下载失败，请稍后再试。');
        }
    }
};

3. 效果演示

饼状图

以下是表示 Axios 请求和处理流程分布的饼状图：

pie
    title Axios下载XLSX流程
    "创建Axios请求": 30
    "处理响应": 20
    "保存文件": 30
    "错误处理": 20

旅行图

以下是完整流程的旅行图：

journey
    title 下载XLSX文件的步骤
    section 发送请求
      创建Axios请求: 5: 用户
      获取Blob文件: 3: 系统
    section 处理响应
      创建Blob对象: 5: 系统
      使用FileSaver.js保存文件: 4: 用户
    section 错误处理
      显示错误信息: 2: 用户

结论

通过上述步骤，您应该能够成功使用 Axios 下载 XLSX 文件，并避免提示文件已损坏的问题。确保在 Axios 请求中设置 responseType 为 blob，并使用 FileSaver.js 正确地保存文件。如果依然遇到问题，可以检查文件的 URL 是否有效，同时在请求和处理响应中添加适当的错误处理逻辑来提升用户体验。

希望这篇文章能够帮助您更好地理解如何在项目中下载 XLSX 文件。如有疑问，欢迎随时联系或留言，请继续努力！