使用a标签无法下载某些文件的解决方法

朴灿烈づ我的快乐病毒、 2024-03-26 18:40 83阅读 0赞

## 一、问题描述 ##

最近需要使用a标签下载mp4文件，url样例如下：

http://xxx.xxx.com/xxx/xxx/v.f100010.mp4

1.最开始按照网上的文章，这样写的：

没想到，这样写，网上找了个exe的url、下载了下是没有问题的，**但是下载mp4文件的话，点击之后什么反应都没有。**

2.又找了一个js方法，是这样：

//网上说这样下载的是1.png文件
    //window.open("https://xxx.com/xxx.png?attname=1.png");
    
    window.open("http://xxx.xxx.com/xxx/xxx/v.f100010.mp4?attname=1.mp4");

**结果，试了一下，直接打开个新页面开始自动播放mp4了，并不是下载。**

3.网上还说，如果后端返回的header里加上这样的东西的话，前端请求时也就可以是下载文件、而不是打开新页面了。

header("content-disposition:attachement;filename=".文件名)

**问题是，对面系统的后端我们没有办法修改，只能改自己的前端想办法下载文件。**

## 二、解决方法 ##

本人是`react`项目，最后找了个这样的，可以实现点击按钮下载mp4文件了（其它项目也可以参考方法代码，这个应该差不多）：

(1)方法代码

ieDownLoad =  (data, fileName,key, _this)=>{
        　try{
          this.download(data, fileName,key, _this); // 调用方式
        }catch(err){
          // 兼容模式下，IE
          const exportBlob = new Blob([data]);
          if (navigator.userAgent.indexOf('Trident') > -1) {
            window.navigator.msSaveBlob(data, fileName);
          } else {
            this.download(data, fileName,key, _this); // 调用方式
          }
        };
      }
    
      download = (data, fileName,key, _this)=>{
    
          //fileName="http://xxx.xxx.com/xxx/xxx/v.f100010.mp4"
          //需要截取下，获得末尾的文件名
          try{
            var site = fileName.lastIndexOf("\/");
            fileName = fileName.substring(site + 1, fileName.length);
          }catch(e){
            console.log("download_error",e)
            fileName = key+'.mp4';
          }
    
    
        　// 地址不存在时，禁止操作
          if(!data)return;
    
            //var data = "http://xxx.xxx.com/xxx/xxx/v.f100010.mp4"
            console.log("now-data1",data);
            //把http:或者https:去掉，让浏览器自己选择，解决https页面不能请求http的问题
            var site2 = data.indexOf("\:");
            data = data.substring(site2 + 1, data.length);
            console.log("now-data2",data);
    
          // 下载文件并保存到本地
          const callback = (data)=>{
    
    
        　　 // 创建a标签，使用 html5 download 属性下载，
            const link = document.createElement('a');
        　　 // 创建url对象
            const objectUrl = window.URL.createObjectURL(new Blob([data]));
            link.style.display='none';
            link.href=objectUrl;
        　　 // 自定义文件名称， fileName
        　　 link.download = fileName; 
        　　 document.body.appendChild(link); 
        　　 link.click();
        　　 // 适当释放url
            window.URL.revokeObjectURL(objectUrl);
          };
          // 把接口返回的url地址转换为 blob
          const xhr = new XMLHttpRequest();
          xhr.open('get', data, true);
          xhr.responseType = 'blob';
          xhr.onload = ()=> {
        　　 // 返回文件流，进行下载处理
            callback(xhr.response);
          };
          xhr.send(); // 不要忘记发送
        };

(2)标签代码：

{downloadPageData.map((item,key) => (
                    <Row style={
       {margin: `8px 0 8px 0`}}>
                      <a  onClick={this.ieDownLoad.bind(this, item.url, item.url, key)}>{item.url}</a>
                   </Row>
                  ))}

(3)downloadPageData的内容：

downloadPageData: [
    {"url":"http://xxx.xxx.com/xxx/xxx/v.f100010.mp4"},
    {"url":"http://xxx.xxx.com/xxx/xxx/v.f100011.mp4"}
    ]