vue3下载axios

在Vue3中使用axios进行文件下载的步骤如下：

1. 首先，需要在项目中引入axios库。可以使用以下代码将axios导入到项目中：

import axios from 'axios'

2. 在Vue页面中，可以通过调用API接口来实现文件下载。在模板中添加一个按钮，并绑定点击事件，如下所示：

<template>
  <div>
    <button v-on:click="download">下载Excel</button>
  </div>
</template>

3. 在Vue组件的脚本部分，需要引入需要使用的API，并定义下载方法。可以使用以下代码：

import { exportExcel } from '@/api/index'

export default {
  name: 'FileDownLoad',
  methods: {
    // 下载Excel
    download() {
      exportExcel().then(response => {
        console.log(response);
        this.downloadFile(response.data);
      })
    },
    downloadFile(data) {
      // 文件导出
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob(\[data\]));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', '测试excel.xls');
      document.body.appendChild(link);
      link.click()
    }
  }
}

4. 在API文件中，定义导出Excel文件的请求方法。可以使用以下代码：

import { exportFileRequest } from '@/libs/axios'

// 导出Excel文件
export const exportExcel = (params) => {
  return exportFileRequest("/exportExcel", params)
}

这样，当用户点击下载按钮时，会调用API接口来获取文件数据，并将文件以Excel格式下载到本地。
#### 引用[.reference_title]
- *1* [vue3.0版本后对于axios、element（element-plus）、qs、mockjs如何下载和引用](https://blog.csdn.net/m0_46205599/article/details/127720980)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue中axios实现下载](https://blog.csdn.net/qq_42043377/article/details/103892991)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]