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

一、问题描述

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

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

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

<a href="http://xxx.xxx.com/xxx/xxx/v.f100010.mp4" target="downloadFile" >下载</a>
<iframe style="display: none" name="downloadFile"></iframe>

没想到，这样写，网上找了个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"}
]