axios 下载文件流

axios 下载文件流

背景:在处理文件下载时,服务端存在校验,需要在请求头里添加token 这时直接使用 a 标签就不能满足需求。接下来我们直接通过 axios 请求,在请求头里设置 token

请求获取文件流并下载


    axios({
      method: "GET",
      url: `${请求地址}`,
      headers: {
        'Authorization': ${token}
      },
      responseType: 'blob'
    }).then(res => {
// 请求成功后处理流
      if(res.status === 200) {
        const blob = new Blob([res.data])
        const downloadElement = document.createElement('a');
        const href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = '自定义文件名.xlsx'; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }
    });

获取文件流并处理成 JSON

const read = new FileReader();
      read.readAsText(e.response.data, 'utf-8');
      read.onload = (data) => {
        const res = JSON.parse(data.currentTarget.result)
        that.$message.error(res.msg);
      }
posted @ 2022-06-20 10:38  影的记忆  阅读(2920)  评论(0编辑  收藏  举报