使用 JavaScript 和 Axios 下载 Excel 文件

        在Web开发中，我们常常需要提供文件下载的功能。通过JavaScript和Axios，我们可以轻松地实现下载Excel文件的功能。本文将介绍一个简单而实用的代码片段，演示如何使用Blob和Axios下载Excel文件。

1. 背景

        有时候，我们需要在前端动态生成并下载一些文件，比如Excel文件。为了实现这一功能，我们可以使用Axios来从服务器获取文件数据，然后通过Blob对象创建下载链接。

2. 使用 Axios 发送请求

        首先，我们需要使用Axios发送GET请求来获取文件的Blob数据。以下是一个简单的函数，用于发送GET请求并返回一个Promise：

function download() {
   return axios({
      url: `your_api_url`,
      method: 'get',
      responseType: 'blob'
   });
}

确保替换 your_api_url 为你实际的API地址。

3. 处理下载文件

        当Promise解析成功后，我们可以获取到服务器返回的Blob数据。接下来，我们使用Blob对象创建一个下载链接，并模拟用户点击下载的过程：

download().then((response) => {
   // 创建Blob URL
   let url = window.URL.createObjectURL(new Blob([response.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}));

   // 创建<a>元素
   let link = document.createElement('a');
   link.style.display = 'none';
   link.href = url;
   link.setAttribute('download', '模板名称'); // 设置文件名

   // 将<a>元素添加到body中
   document.body.appendChild(link);

   // 模拟点击下载
   link.click();

   // 移除<a>元素
   document.body.removeChild(link);

   // 释放Blob URL
   window.URL.revokeObjectURL(url);
});

        在这段代码中，我们通过 window.URL.createObjectURL 创建了一个Blob对象的URL。然后，我们创建了一个隐藏的 <a> 元素，设置其 href 属性为Blob URL，并设置 download 属性为文件名。通过模拟点击 <a> 元素，我们成功触发了文件下载。

4. 总结

        通过使用JavaScript和Axios，我们可以轻松地实现前端文件下载功能。

        如果你想使用相同的模式下载其他类型的文件，你只需要根据文件类型设置正确的 MIME 类型。在Blob对象的构造函数中，第二个参数 {type: "文件的MIME类型"} 指定了文件类型。

function downloadFile(url, fileName, fileType) {
  axios({
    url: url,
    method: 'get',
    responseType: 'blob'
  }).then((response) => {
    const blob = new Blob([response.data], { type: fileType });
    const url = window.URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', fileName);
    
    document.body.appendChild(link);
    link.click();
    
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  });
}

例如，下载一个MP4文件：

downloadFile('https://example.com/api/download/video', 'example.mp4', 'video/mp4');

以下是一些常见文件类型的MIME类型：

后缀名	文件类型	类型(type)
.xls	Microsoft Excel	application/vnd.ms-excel
.xlsx	Microsoft Excel (OpenXML)	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.doc	Microsoft Word	application/msword
.docx	Microsoft Word (OpenXML)	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.pdf	PDF	application/pdf
.ppt	Microsoft PowerPoint	application/vnd.ms-powerpoint
.pptx	Microsoft PowerPoint (OpenXML)	application/vnd.openxmlformats-officedocument.presentationml.presentation
.png	便携式网络图形（PNG）	image/png
.mp3	MP3 音频	audio/mpeg
.gif	GIF	image/gif
.jpeg	JPEG 图片	image/jpeg