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

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

作者: 双耳云 | 来源:发表于2019-06-20 19:10 被阅读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);
            });
          },
    

    相关文章

      网友评论

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

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