在vue后臺管理項(xiàng)目中莲蜘，目前我常用的就兩種導(dǎo)出方式

• 一種是不需要攜帶token的，直接調(diào)用后臺的接口帘营，攜帶需要傳遞參數(shù)就行菇夸，具體實(shí)現(xiàn)代碼如下：
  在main.js封裝指令

let baseDownloadUrl = 'http://xxxxxxx:8080'  // 域名
const PATH = {
    userList：'vue/export/userList'  // 后臺接口地址
}
// 封裝v-out指令
Vue.directive('out', {
    inserted: (el, binding) => {
        el.addEventListener('click', () => {
            console.log(binding.value) // 自定義指令傳請求參數(shù)
            let a = document.createElement('a') // 創(chuàng)建a標(biāo)簽
            // 處理請求參數(shù)，在url后面拼接
            let params = '?'
            for (let key in binding.value.params) {
                params = params + key + '=' + binding.value.params[key] + '&'
            }
            console.log(params)
            a.style.display = 'none'
            // 測試導(dǎo)出文件
            // link.
            // a標(biāo)簽添加導(dǎo)出地址
            a.href =
                baseDownloadUrl +
                PATH[binding.value.pathName] +
                putCode +
                (params || '')
            a.setAttribute('download', '文件名')  // a標(biāo)簽添加download屬性仪吧，導(dǎo)出文件名需要就添加庄新，不需要則為空
            document.body.appendChild(a)
            a.click() // 觸發(fā)a標(biāo)簽點(diǎn)擊事件
        })
    }
})

在需要導(dǎo)出的頁面應(yīng)用：

<el-button  size="small" type="primary" v-out="{
                        pathName: 'userList',
                        params: //{請求參數(shù)}
                    }"  >導(dǎo)出</el-button>

• 另一種導(dǎo)出方式則是帶token導(dǎo)出，token封裝在請求頭里薯鼠，在請求頭里發(fā)送給后端
  調(diào)用導(dǎo)出接口時(shí)择诈，需要加參數(shù)：responseType: ‘blob’ （必須要有的）
  封裝導(dǎo)出請求文件exportOut.js

export function expotOut (searchList, pathName, xlsName) {
  // 獲取時(shí)間，這一步是在下載時(shí)文件名帶下載日期出皇，例如：用戶信息2020-04-27.xls,如無需要可以去掉
  let d = new Date()
  let month = (d.getMonth() + 1)
  let day = d.getDate()
  let time = d.getFullYear() + '-' + (String(month).length > 1 ? month : '0' + month) + '-' + (String(day).length > 1 ? day : '0' + day)
  // 地址
  let baseURL = 'http://xxxxxxx:8080'  // 域名
  const PATH = {
    userList：'vue/export/userList', // 后臺接口地址
  }
  // 參數(shù)
  let params = '?'
  for (let key in searchList) {
    params = params + key + '=' + searchList[key] + '&'
  }
  function createObjectURL (object) { return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object) }
  var xhr = new XMLHttpRequest()
  var formData = new FormData()
  xhr.open('get', baseURL + PATH[pathName] + params) // url填寫后臺的接口地址羞芍，如果是post，在formData append參數(shù)（參考原文地址）
  xhr.setRequestHeader('token', localStorage.getItem('token'))
  xhr.responseType = 'blob'
  xhr.onload = function (e) {
    if (this.status === 200) {
      var blob = this.response
      // xls文件名稱
      var filename = `${xlsName}${time}.xls`
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename)
      } else {
        var a = document.createElement('a')
        var url = createObjectURL(blob)
        a.href = url
        a.download = filename
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(url)
      }
    }
  }
  xhr.send(formData)
}

vue文件中使用導(dǎo)出功能：
引入exportOut.js

import { expotOut } from '../http/exportOut'

使用

 methods: {
    // 導(dǎo)出
    outFile () {
      expotOut(this.searchList, // 導(dǎo)出請求參數(shù)
        'userList', // 后臺地址PATH對象的key
        '用戶信息'// 導(dǎo)出文件名字
      )
    },
    }