导出下载功能的2中方式 - a链接下载名字跟随文件名字

点击导出按钮直接执行方法

1, 简易导出 适合导出类型少的

// 从本地拿 出地址 process.env.VUE_APP_BASE_API   拼接 接口以及需要的数据
var url = process.env.VUE_APP_BASE_API + '/roster/listRosterExport?status=' + this.status
// 用 window 下载导出
 window.location.href = url

2 多筛选条件进行的数据 导出

//  api中接口定义需要加个 responseType: 'blob',
export function rosterExport(params) {
  return request({
    url: '/roster/listContractMessageExport',
    method: 'get',
    responseType: 'blob',
    params
  })
}

// 定义后台需要的数据
   var data = {
      status: this.status
      name:this.name,
      sex:this.sex
    }
    rosterExport(data).then(res => {
       this.exportData(res, '合同管理')
     })
     
// 固定的下载方法 下载的是excel 文件
exportData(res, title) {
      const link = document.createElement('a')
      const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      link.setAttribute('download', title + '.xlsx')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },

• 下载word文件

exportData(res, title) {
      const link = document.createElement('a')
      const blob = new Blob([res.data])
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      link.setAttribute('download', title + '.docx')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },

• request 里面的拦截相应 判断是否为文件流文件
  // .ms-excel if (response.headers['content-type'] != null && response.headers['content-type'].indexOf('vnd') > 0) { return response }

// response interceptor 响应拦截
service.interceptors.response.use(
  // 正常获取数据
  response => {
    // .ms-excel
    if (response.headers['content-type'] != null && response.headers['content-type'].indexOf('vnd') > 0) {
      return response
    }
    if (response.data && response.data.code === 200) {
      return response.data
    } else {
      if (response.data.code > 200 && response.data.code < 300) {
        return response.data
      } else {
        if (response.data.code === 401) {
          // 如果为401 跳到单点登录
          window.localStorage.clear()
          removeToken('SSO-Token')
          window.location.href = response.data.url
        } else {
          Message({ type: 'error', message: response.data.message })
        }
        return Promise.reject(response)
      }
    }
  },

通过url下载文件 并修改名字为特定名字

 <a @click="clickdowm(item.url,item.name)" class="file-text" :title="item.name">{{item.name}}</a>

 clickdowm(url, name) {
      var x = new XMLHttpRequest()
      x.open('GET', url, true)
      x.responseType = 'blob'
      x.onload = function (e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a')
        a.href = url
        a.download = name // 下载后的文件名
        a.click()
      }
      x.send()
    },