前端通过后端返回二进制数据下载导出Excel文件

2024-12-05 约 650 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=132270808

前端通过后端返回二进制数据下载导出Excel文件

下载导出Excel大家应该都知道，一般都是由前端直接调用后端接口，然后后端直接操作进行下载导出成Excel，但是难免在有些特殊的时候后端会把相应的文件二进制给我们，那就需要我们自行进行导出配置了，二进制文件内容如下：

一、首先先创建相应的js文件

我这里是在utils文件夹下创建了一个 exports.js 文件

文件内容如下(附带注释）：

/**
 * @param {string} url 下载请求地址
 * @param {string} params 请求参数
 * @param {string} name 下载文件名称
 */
import axios from 'axios' // 导入axios 用于网络请求
import store from '@/store' // 导入vuex 中存储的token（这里可随机应变）
import { Message } from 'element-ui' // 导入饿了么UI

const downLoad = function(url, params, name) {
  axios({
    url: '/api/v1/' + url, // 根据需求自己改
    method: 'post', // 根据需求自己改
    headers: {
      'Content-Type': 'application/json',
      token: store.getters.token // token信息
    },
    data: params,
    responseType: 'blob'
  }).then((res) => {
    // 生成下载URL
    const url = window.URL.createObjectURL(new Blob([res.data]), {
      type: 'application/vnd.ms-excel',
      'charset': 'utf-8',
      'content-type': 'application/octet-stream'
    })
    // 创建隐藏的a标签用于自动下载导出文件
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', name + '.xlsx')
    document.body.appendChild(link)
    link.click()
    Message({
      message: '导出成功',
      type: 'success',
      duration: 5 * 1000
    })
  }, (err) => {
    console.log(err)
    Message({
      message: '导出失败',
      type: 'error',
      duration: 5 * 1000
    })
  })
}
// 把函数抛出方便外界访问使用
export { downLoad }

二、使用 exports.js 文件

使用方法很简单，就直接在组件内导入调用传参，如下：

 import { downLoad } from '自己存放js的地址'
    
 // 直接在方法中这样调用传参

 downLoad(url,params,name)

我写的方法截图如下：

导入：

使用：

里边其它内容可自行根据需求设置修改，我这里导出是在整个项目中封装成了一个公共的组件，然后在需要导出的地方直接导入就可使用，因为业务需求不一样我就没展示出来，大家各求所需哈！!

目录

前端通过后端返回二进制数据下载导出Excel文件

前端通过后端返回二进制数据下载导出Excel文件