The solution to the failure to download certain files using the a tag

1. Problem description

Recently, you need to use the a tag to download mp4 files. The url example is as follows:

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

1. At the beginning, according to the articles on the Internet, it was written like this:

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

Unexpectedly, writing like this, I found an exe url on the Internet and downloaded it without any problem, but if I downloaded the mp4 file, there was no response after clicking it.

2. I found another js method, which is like this:

//网上说这样下载的是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");

As a result, I tried it, and opened a new page to start playing mp4 automatically, not downloading.

3. It is also said on the Internet that if such a thing is added to the header returned by the backend, the frontend can download the file instead of opening a new page when requesting.

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

The problem is that we have no way to modify the back end of the opposite system, we can only change our own front end to find a way to download files.

Two, the solution

I am reacta project, and finally I found one like this, which can download mp4 files by clicking the button (other projects can also refer to the method code, this should be similar):

(1) method code

  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) Label code:

              {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) Contents of downloadPageData:

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