zoukankan      html  css  js  c++  java
  • 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
      }
    }
  • 相关阅读:
    Java开发常用Util工具类
    冒泡排序
    EMQ 消息服务器
    将jar文件包打成exe文件
    mina框架搭建tcp服务器:编写自定义协议及编解码器
    SpringBoot中定时任务的设置
    SpringBoot项目+Shiro(权限框架)+Redis(缓存)集成
    计算两个时间之间的天数
    关于extern的使用
    ADC采样间隔问题+TRGO作为ADC的触发源头
  • 原文地址:https://www.cnblogs.com/yuanyuanya/p/12467482.html
Copyright © 2011-2022 走看看