前端导出(下载)

原创已于 2023-01-04 11:42:15 修改 · 250 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2023-01-04 11:41:23 首次发布

功能专栏收录该内容

6 篇文章

订阅专栏

该代码段展示了在Vue应用中如何利用axios库进行POST请求，从后台接口导出Excel文件。它涉及到store获取用户Token和ID，设置请求头，以及利用Blob对象处理响应数据以实现文件下载功能。

import { BASE_URL } from '@/config'  //基本路径(根据项目封装情况决定)
import axios from 'axios'
import store from '@/store'
import router from '@/router'

/* 导出（POST）
   url:接口地址
   data:参数
   name:导出表格名称.xls
*/
export const exportExcelPost = (url, data, name) => {
  try {
    axios({
      method: 'post',
      url: `${BASE_URL}${url}`,
      timeout: 3 * 1000 * 60,
      headers: {
        userToken: store.getters.token,
        userId: store.getters.id,
        referers: router.app._route.meta.role
      },
      responseType: 'blob',
      data
    }).then(result => {
      const link = document.createElement('a')
      let blob = new Blob([result.data], {
        type: 'application/octet-stream'
      })
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      link.download = `${name}`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    })
  } catch (error) {
    console.log(error)
  }
}

 ps:调用后端接口即可,uri:接口地址;data:参数;name:导出文件名称