vue项目中,后端返回文件流,axios发送post请求下载文件

2019-06-20  本文已影响0人  双耳云

1.html

 <el-button type="primary" @click.native="handleExport">下载</el-button>

2.修改axios请求的responseType为blob,以post请求为例

export function export(params) {
  return axios({
    headers: {
      'Content-Type':'application/json'
    },
    responseType: 'blob', //一定要写
    method: 'post',
    url:'/export',
    data:{
      "head": {},
      "body": {
        "data":params
      }
    }
  })
}

3.进行请求处理

handleExport() {
        const params = {};
        export(params).then(res => {
          console.log(res.data)
          const blob = new Blob([res.data]);//处理文档流
          const fileName = 'excel.xlsx';
          const elink = document.createElement('a');
          elink.download = fileName;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        });
      },
上一篇下一篇

猜你喜欢

热点阅读