html a标签链接 点击下载文件

通常在咱们写项目的时候会遇到附件上传、下载功能,在上传完文件后会把文件的路径发送给后端保存到数据库里以便下载,如果不通过后台直接下载的话,可以把文件路径给a标签的属性href,就可以实现下载

<a href="文件路径">点击下载</a>

但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加一个属性“download”;

<a href="文件路径" download="文件名">点击下载</a>

这里download也可以不写任何信息,download="" 会自动使用默认文件名。

只适用于同源下,如果是跨域的话,download属性就会失效。会直接打开,不会直接下载。

解决方案:

 //文件的下载
    downloadFile(item) {
      var x = new XMLHttpRequest();
      x.open("GET", item.url, true);
      x.responseType = 'blob';
      x.onload = function (e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = item.name ; //下载后的文件名
        a.click()
      }
      x.send();
      // this.$message.success('下载成功!')
    }

  • 8
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值