• vue+element ui实现导出Excel文件


    首先,一定一定要设置请求头:responseType: 'blob',

    一开始试了一下直接调用的,就是像平常调用接口那样,发现返回来一堆乱码,所以,

    const link = document.createElement('a')
    link.download = fileName
    link.href = objectUrl
    link.click()
    也是关键
    其他位置像正常连接口那样写就可以了,我是这样写的,封装好的接口:
     <el-button type="primary" class="refresh" @click="onCheckedOut">导出</el-button>
    import {exportData} from 'config/index'
     onCheckedOut () { // 导出
       exportData({
         url: '/admin/user/info/export'
       }).then(res => {
         if (res.status == 200) {
           let fileName = res.headers['content-disposition'].split('=')[1]
               let objectUrl = URL.createObjectURL(new Blob([res.data]))
               const link = document.createElement('a')
               link.download = fileName
               link.href = objectUrl
               link.click()
         } else {
              this.$message.error('出现异常请联系管理员!')
         }
       }).catch(err => {
         this.$message.error('出现异常稍后再试!')
       })
    }

    config/index.js

    export const exportData = ({ url, data }) => { // 导出文件使用
      return httpDowload({ url, data, method: 'post' })
    }
    export const httpDowload = httpParams => {
      let { url, data, method } = { url: '', data: {}, method: 'get', ...httpParams }
      try {
        let params = {}
        if (method === 'get') {
          params = data
          data = {}
        }
        return axios({
          baseUrl: httpParams.baseURL || '/admin',
          url,
          method,
          params,
          data,
          headers: setHeaders(),
          responseType: 'blob'
        }).then((zData) => handleResponse(zData))
      } catch (err) {
        console.log(err)
      }
    }
    function handleResponse (data) {
      if (data.status !== 200) {
        return Promise.reject(data)
      } else {
        return Promise.resolve(data)
      }
    }
    export function setHeaders () {
      const token = sessionStorage.getItem('token') === null ? '' : sessionStorage.getItem('token')
      return {
        TOKEN: token
      }
    }
  • 相关阅读:
    10年后我又来看看我自己!
    KubernetesKuboard
    VSCode SSH 免密登录
    Windows Terminal 使用 PuTTY 连接 COM 串口
    PuTTY SSH 免密登录
    FastDDS 安装过程的坑🕳坑🕳坑🕳坑🕳坑🕳坑🕳
    Samba 安装、配置、共享 home 目录、创建用户、设置密码、映射盘符
    Win10 恢复快捷方式小箭头
    CSAPP 并发编程读书笔记
    修改 VSCode 终端配色
  • 原文地址:https://www.cnblogs.com/yuanyuanya/p/12467482.html
Copyright © 2020-2023  润新知