vue2 使用axios 请求后台返回文件流导出为excel

目录

[步骤 1: 安装 Axios](#步骤 1: 安装 Axios)

[步骤 2: 创建 Axios 实例](#步骤 2: 创建 Axios 实例)

[步骤 3: 发起请求并处理文件流](#步骤 3: 发起请求并处理文件流)

说明


步骤 1: 安装 Axios

首先,确保项目中已经安装了 Axios。如果没有,可以通过以下命令进行安装:

bash 复制代码
npm install axios

步骤 2: 创建 Axios 实例

为了更好地管理 Axios 配置,可以创建一个 Axios 实例。例如,在 src 目录下创建一个 axiosInstance.js 文件:

javascript 复制代码
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'http://your-api-base-url.com', // 替换为你的后端 API 基础 URL
  responseType: 'blob' // 设置响应类型为 blob
});

export default axiosInstance;

步骤 3: 发起请求并处理文件流

在 Vue 组件中使用这个 Axios 实例发起请求,并处理返回的文件流以导出 Excel 文件。

例如,在 src/views/user/index.vue 文件中:

javascript 复制代码
<template>
  <div>
    <button @click="downloadExcel">导出 Excel</button>
  </div>
</template>

<script>
import axiosInstance from '@/axiosInstance';

export default { 
  methods: {
    async downloadExcel() {
      try {
        const response = await axiosInstance.get('api地址', {
          params: {
           //传入查询参数
          }
        });

        // 创建一个 blob 对象
        const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });

        // 创建一个链接元素
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = 'exported-file.xlsx'; // 设置下载文件名
        link.click();

        // 释放 URL 对象
        window.URL.revokeObjectURL(link.href);
      } catch (error) {
        console.error('导出excel失败', error);
      }
    }
  }
};
</script>

说明

  1. 配置 Axios 实例 :我们创建了一个 Axios 实例并将 responseType 设置为 blob,以便 Axios 将响应数据处理为文件流。

  2. 发起请求 :在 downloadExcel 方法中,我们使用 axiosInstance.get 方法发起 GET 请求。如果需要传递查询参数,可以通过 params 选项传递。

  3. 处理文件流 :请求成功后,我们将响应数据创建为一个 Blob 对象,并将其类型设置为 application/vnd.ms-excel。然后,我们创建一个临时的链接元素,设置其 href 属性为 Blob 对象的 URL,并调用 click 方法触发下载。下载完成后,释放 URL 对象以避免内存泄漏。

相关推荐
Q_Q196328847519 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
孟陬19 小时前
事件驱动 vs 轮询:为什么 Node.js 官方推荐 `fs.watch()` 而非 `fs.watchFile`
node.js
林希_Rachel_傻希希21 小时前
Express 入门全指南:从 0 搭建你的第一个 Node Web 服务器
前端·后端·node.js
huangyiyi6666621 小时前
轮询那些事儿
javascript·前端框架·vue·js
七仔的博客1 天前
博客的加载速度和大小的优化、优化再优化
vue·博客·优化·gzip·live2d
Q_Q5110082851 天前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
duandashuaige2 天前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
云枫晖2 天前
深入浅出npm:现代JavaScript项目基石
前端·javascript·node.js
Q_Q19632884752 天前
python+vue的在线租房 房屋租赁系统
开发语言·vue.js·spring boot·python·django·flask·node.js
不会写DN2 天前
用户头像文件存储功能是如何实现的?
java·linux·后端·golang·node.js·github