问题：

前端使用React开发，想要下载阿里云OSS存储的视频文件，使用了<a>标签，点击后就会在浏览器打开预览，具体原因这里不再多说，查找到了几个解决办法，在此记录一下。

一、 下载文件的三种通用方式

1、使用iframe实现

只需要传一个文件下载地址的url即可 

downloadFile = (url) => {
    //下载方法
    console.log(url)
    const iframe = document.createElement("iframe");
    iframe.style.display = "none"; // 防止影响页面
    iframe.style.height = 0; // 防止影响页面
    iframe.src = url;
    document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
    // 5分钟之后删除
    setTimeout(() => {
      iframe.remove();
    }, 5 * 60 * 1000);
  }

2、使用a标签

downloadFile = ((fileurl, filename) => { 
        //fileurl文件地址（一般是接口返回） filename文件下载后的名字
        var a = document.createElement('a');
        a.download = filename; //下载后文件名
        a.style.display = 'none';
        var blob = new Blob([fileurl]);  // 字符内容转变成blob地址 二进制地址
        a.href = URL.createObjectURL(blob);
        document.body.appendChild(a);
        a.click();                        // 触发点击
        document.body.removeChild(a);    // 然后移除
 
    });

 const downloadFile = (fileurl,filename) => { //fileurl文件地址（一般是接口返回）
       const a = document.createElement("a");
       a.style.display = "none";
       a.href = fileurl;
       a.download = filename || ""; //需要把这行加上，告诉浏览器是下载行为 ,可以传空
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
   
    };

3、使用form表单

exportCallBack = (fileUrl) => {
        var bodyElement = document.body; //获取body
        var divElement = document.createElement("div"); //创建div
        var downloadUrl = fileUrl; //文件地址
        divElement.innerHTML = `<form action=${downloadUrl} method="post" id="formBox"></form>` //form标签
        bodyElement.appendChild(divElement); //追加到body
        document.getElementById("formBox").submit(); //自动提交表单
        bodyElement.removeChild(divElement); //移除form
    }