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('下载成功!')
    }

你可能感兴趣的:(html)