vue2 使用 get 下载 Excel

axios#

import axios from 'axios';

// 定义下载Excel文件的函数
function downloadExcel() {
  axios.get('http://example.com/download-excel', {
    responseType: 'blob', // 指定响应数据类型为Blob
  })
    .then(response => {
      // 创建一个临时的URL对象
      const url = URL.createObjectURL(new Blob([response.data]));

      // 创建一个a标签，并设置其属性
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'filename.xlsx'); // 指定下载的文件名

      // 将a标签添加到文档中，并模拟点击下载
      document.body.appendChild(link);
      link.click();

      // 清理临时URL对象
      URL.revokeObjectURL(url);
    })
    .catch(error => {
      console.error('下载Excel文件时出错:', error);
    });
}

在上面的示例中，我们使用 axios 发送 GET 请求，并设置响应类型为 blob，以便接收二进制数据。然后，将响应的二进制数据转换为 Blob 对象，并创建一个临时 URL 对象。接下来，创建一个 a 标签，设置其 href 属性为临时 URL，同时指定下载的文件名。将 a 标签添加到文档中，模拟点击该标签来触发文件下载。最后，清理临时 URL 对象以释放资源。

请确保将示例中的 URL（http://example.com/download-excel）替换为您实际的下载 Excel 文件的 URL，并根据需要修改文件名（filename.xlsx）。

fetch#

以下是一个使用 fetch 的示例代码：

fetch('http://example.com/download-excel', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // 设置文件类型为Excel
  }
})
  .then(response => response.blob())
  .then(blob => {
    // 创建一个临时的URL对象
    const url = URL.createObjectURL(blob);

    // 创建一个a标签，并设置其属性
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.xlsx'; // 指定下载的文件名

    // 将a标签添加到文档中，并模拟点击下载
    document.body.appendChild(link);
    link.click();

    // 清理临时URL对象
    URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('下载Excel文件时出错:', error);
  });

在上面的示例中，我们使用 fetch 发送 GET 请求，并设置请求头的 Content-Type 为 Excel 文件的 MIME 类型。然后通过 response.blob () 方法将响应转换为 Blob 对象，最后创建一个临时 URL 对象，并将其设置为 a 标签的 href 属性。接下来，模拟点击该 a 标签，从而触发文件下载。最后，清理临时 URL 对象以释放资源。

请确保将示例中的 URL（http://example.com/download-excel）替换为您实际的下载 Excel 文件的 URL，并根据需要修改文件名（filename.xlsx）和请求头中的文件类型。