【Vue】导出文件

1. 定义接口

导出文件的请求类型为：responseType: "blob"

// 引入axios
import axios from 'axios'
export function download (url, params) {
  if (!params) {
    params = {}
  }
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params,
      headers: { 'Access-Control-Allow-Credentials': 'true'},
      responseType: 'arraybuffer' // 防止乱码
    }).then(res => {
      if (res.data && res.data.code === 16) { // 未登录
        // 未登录时处理
        return
      }
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

2. 接口请求

import {download} from './http'
export const exportFile = () => download('/file/export', {})

3. 导出文件

// 导出
onExportClick () {
  exportFile().then(res => {
     this.readFileDownload(res, '导出文件名称')
  })
},

readFileDownload(data, msg) {
    let res = data
    const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })

    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, msg)
    } else {
        console.log(blob)
        const url = window.URL.createObjectURL(blob)
        console.log(url)
        const aLink = document.createElement('a')
        aLink.style.display = 'none'
        aLink.href = url
        aLink.setAttribute('download', msg)
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink)
        window.URL.revokeObjectURL(url)
    }
},