美文网首页
vue 导出处理后端返回的流文件总结

vue 导出处理后端返回的流文件总结

作者: 风飞燕 | 来源:发表于2020-07-16 16:31 被阅读0次
怂怂压阵.jpg

第一步

定义一个js 文件(我的是 method.js) 然后在axios请求中 特别注意headers要加上( 'Content-Type': 'application/json')(好吧,可能只有我这种憨憨才会犯错),我就是之前没有加,然后百度出来的也没有加,一直报错type未定义,同时一般做项目的时候都会自己封装网络请求,在处理这里的时候要注意你的网络请求有没有做返回状态判断(添加响应拦截器),我就是加了然后被拦截了让我郁闷了一下子,就是下面这种

// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use(res => {
  //res.data.type  导出处理
  if (res.data.code === 0||res.data.code === 200||res.data.type) {
    return res
  }else if(res.data.code==1){
  //  Message.error(res.data.msg);
    return res
  }
  else if (res.data.code==401){
  //  localStorage.clear();
  //  Message.error(res.msg);
  //  sessionStorage.clear();
  // router.push('/');
  }
  else {
   Message.error(res.data.msg);
    /* loadingInstance.close() */
    // this.$message.error(res.data.msg)
  }
}, err => {
   // Message.error('请求失败, 请稍后再试!');
  return Promise.reject(err)
})
import axios from 'axios'
// 导出Excel公用方法
export function exportMethod(data) {
    axios({
        method: data.method,
        url: `${data.url}${data.params ? '?' + data.params : ''}`,
        responseType: 'blob',
        headers:{
            'Content-Type': 'application/json'
        }
    }).then((res) => {
        // console.log('明细导出')
        const link = document.createElement('a')
        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)

        // link.download = res.headers['content-disposition'] //下载后文件名
        link.download = data.fileName //下载的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }).catch(error => {
       // Message.error({
       //     message: '网络连接错误'
       //  })
        console.log(error)
    })
}

第二步

这里提醒一下
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
需要取res.data ,如果直接取res,导出的excel数据是[object,object],感兴趣的可以试试看,本人亲测
在需要的页面引用
import {exportMethod} from '../../assets/js/method.js'

  //导出
            exportExcel(){
                let myObj={
                    method: 'get',
                    url: '/order/exportExcel',
                    fileName:'订单',
                    params:`merchantId=${this.search.merchantId}&beginDate=${this.dates[0]}&endDate=${this.dates[1]}`
                }
                exportMethod(myObj);
            },

踩进了自己挖的坑,仅此告诫以后的自己不要再次掉坑里。

结语:不想奋斗了,又嫌弃自己太菜了

相关文章

网友评论

      本文标题:vue 导出处理后端返回的流文件总结

      本文链接:https://www.haomeiwen.com/subject/sszphktx.html