vue中携带请求头使用a标签下载文件

适用于发送请求直接返回文件使用

1. 需求 单击此按钮下载文件 ， 需要携带请求头

 2. 代码实现

 Html部分

   <a-button style="color: #033aff" @click="downLoadTemplate">下载模板</a-button>
          <a href=""></a>

JavaScript部分

使用axios请求文件下载地址，我这里配置的baseurl为  api 服务器会自动代理

运维部署到服务器端的baseurl也是 api ， 会使用nginx进行代理

const downLoadTemplate = () => {
  let userTokenStr = localStorage.getItem('usertoken') || '';

  axios
    .get(`/api/account/${sRValue.value}/template/?fmt=${fmt.value}`, {
      responseType: 'blob',
      // 请求头添加token
      headers: { Authorization: `Bearer ${userTokenStr}` }
    })
    .then((res) => {
      if (res.status === 200) {
        var elink = document.createElement('a');
        // 使用后端提供的文件名  命名
        const fileName = res.headers['content-disposition'].split('=')[1];
        elink.style.display = 'none';
        // 文件下载地址赋值
        elink.href = window.URL.createObjectURL(res.data);
        let str = sRValue.value + fileName;
        str = str.substring(0, str.length - 1);
        // 自定义文件名
        elink.download = str;
        // 调用a标签单击事件进行下载文件
        elink.click();
        message.success('文件导出成功');
      }
    })
    .catch((err) => {
      console.log(err, '打印错误信息');
      message.error(`数据导出失败，${err.message}`);
    });
};

最终实现效果   , 单机按钮下载文件