下载文件(携带token)的方式

方法1:XMLHttpRequest

downloadXlsFile(url,token,name){
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('token', token);

  xhr.responseType = "blob";
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 数据在 this.response 保存
      // excel 的 MIME 格式为 application/vnd.ms-excel
      var blob = new Blob([this.response], {type: "application/vnd.ms-excel"});
      console.log(this.response)
      // 创建a链接 href链接地址 download为下载下来后文件的名称
      var aa = document.createElement('a');
      aa.href = URL.createObjectURL(blob);
      aa.innerHTML = 'a链接';

      aa.download = name;
      aa.style.display = 'none'; //隐藏a标签 直接调用a标签的点击事件
      document.body.appendChild(aa);
      aa.click();
    } else {
      //文件流结束关闭loading加载框
    }
  }
  xhr.send();
}

方法2

authExcelEnvDownload(this.content).then(res=>{this.downloadData(res.data)})

downloadData(data){
          const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
          const link = document.createElement('a')
          link.href = url
          let attributeValue = `信息反馈.xls`
          link.setAttribute('download', attributeValue)
          document.body.appendChild(link)
          link.click()
          link.remove()
          this.$notify({title:'提示',message:'下载即将开始...'})
        },
export function authExcelEnvDownload(data) {
  return request({
    url: `/download`,
    method: 'post',
    data,
    responseType: 'blob'    // 重点在于配置responseType: 'blob'
  })
}
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue下载文件携带请求头可以通过创建一个下载链接,并将请求头信息添加到该链接的请求头中来实现。 首先,在Vue组件中,需要定义一个方法来处理文件下载的请求。在该方法中,可以使用axios库发起请求,并将请求头信息作为配置参数传递给axios。 示例代码如下: ```javascript import axios from 'axios'; export default { methods: { downloadFile() { // 请求头信息 const headers = { // 添加自定义请求头 'Authorization': 'Bearer your_token' }; // 发起下载请求 axios({ method: 'get', url: 'your_download_url', responseType: 'blob', // 设置响应类型为blob headers: headers // 添加请求头 }).then((response) => { // 创建下载链接 const url = window.URL.createObjectURL(new Blob([response.data])); // 创建a标签 const link = document.createElement('a'); link.href = url; // 设置文件名 link.setAttribute('download', 'your_file_name'); // 添加到页面,模拟点击下载 document.body.appendChild(link); link.click(); // 清理创建的对象 window.URL.revokeObjectURL(url); document.body.removeChild(link); }); } } } ``` 在上述代码中,你需要将`your_token`替换为你的实际请求头信息,`your_download_url`替换为你的文件下载链接,`your_file_name`替换为文件下载的名称。 这样,当调用`downloadFile`方法,会发送带有请求头的文件下载请求,并在成功获取响应后,创建下载链接,模拟点击下载文件。 需要注意的是,由于涉及到文件下载,需要将响应类型设置为`blob`,并通过`URL.createObjectURL`方法创建下载链接。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值