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

本文讲述了HTMLdownload属性在某些场景下的失效问题,介绍了如何通过使用blob格式和fetchAPI来处理不同源文件流下载,以及处理URL.createObjectURL在文件流情况下的应用。
摘要由CSDN通过智能技术生成
<a href="/images/a.exe" download="b">点击下载</a> //一个普通的a标签下载是可以通过download属性进行设置下载名称的

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

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

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

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

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

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

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

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

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值