使用a标签下载时,设置下载的文件名称

时间:2025-04-05 12:08:00
<a href="/images/" download="b">点击下载</a> //一个普通的a标签下载是可以通过download属性进行设置下载名称的

但是在某些特定情况下,你会发现download设置的属性失效了

download 属性的可选值将成为文件下载后的新名称。允许使用任何值,浏览器会自动检测正确的文件扩展名并将其添加到文件中(例如 .img、.pdf、.txt、.html 等)。

如果省略该值,会使用原始文件名。

还有一种情况是,你的href值和你当前的浏览器不同源,导致依然会使用原始文件名

如下载链接为href="htts://fordata/",而你当前的浏览器url为https://forcar,触发了不同源的情况,那么依然是无法正常修改名称的

这时候你可以通过转变href值来完成下载,我这使用的是blob格式进行处理的

//一般最简便的方式是直接使用
function download(item){
     let blobUrl = ();
     let triggerDownload = $("#download").attr("href", videoUrl).attr("download",            `${}`); // 把url放到我们的a标签中,并得到a标签对象
     triggerDownload[0].click(); //模拟点击一下a标签,即可下载啦!
}
//但是这种情况在,你的url是文件流时,方法会判定失效
//使用这个方法就可以啦
fetchVideoBlob(videoUrl) {
      return fetch(videoUrl)
      .then(response => {
        ('response',response)
        if (!) {
          throw new Error('Network response was not ok');
        }
        return ();
      })
      .catch(error => {
        ('Error fetching video blob:', error);
      });
    },

function download(){
().then(blob => {
            let videoUrl = (blob)
            let triggerDownload = $("#download").attr("href", videoUrl).attr("download", `${}`); // 把url放到我们的a标签中,并得到a标签对象
            triggerDownload[0].click(); //模拟点击一下a标签,即可下载啦!
          });
}

相关文章