react、vue、js实现文件下载导出（iframe，form,a标签）

项目中用到下载导出功能实现：

第一、二、三种方法是通用方法，vue\react\js都可以使用，当然也有react专用的（实际上是react的方法实现）。

一般都是从接口获取到文件地址，然后调用下面的方法即可，如果下载多个文件就只能循环调用了。

第一种方法：

iframe实现

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

javascript">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分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
    setTimeout(() => {
      iframe.remove();
    }, 5 * 60 * 1000);
  }

第二种方法：

a标签

javascript">downloadFile = ((fileurl, filename) => { //fileurl文件地址（一般是接口返回） filename文件下载后的名字
        console.log("3333")
        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);    // 然后移除

    });

第三中方法：

form表单

javascript">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
    }

react里专用的方法（显得很鸡肋）：

这个方法很麻烦，需要先引入

javascript"> import ReactDOM from "react-dom";

然后再项目中跟组件加上这一行或者在使用的组件，render里加上这一行

<div id="exportBoxBank"></div>

javascript">exportCallBack = (fileUrl) => {
        var divElement = document.getElementById('exportBoxBank'); //获取div  也可以用ref获取
        var downloadUrl = fileUrl; //文件地址
        ReactDOM.render(<form action={downloadUrl} method="post" id="formBox"></form>, divElement);
        document.getElementById("formBox").submit(); //自动提交表单
        ReactDOM.unmountComponentAtNode(divElement) //ReactDOM.unmountComponentAtNode()方法，参数为一个结点，调用方法会卸载该容器中的渲染
    }

大致的伪代码：

javascript">import React, { Component } from 'react';
import ReactDOM from "react-dom";

class Index9 extends Component {
    exportCallBack = (fileUrl) => {
        var divElement = document.getElementById('exportBoxBank'); //获取div  也可以用ref获取
        var downloadUrl = fileUrl; //文件地址
        ReactDOM.render(<form action={downloadUrl} method="post" id="formBox"></form>, divElement);
        document.getElementById("formBox").submit(); //自动提交表单
        ReactDOM.unmountComponentAtNode(divElement) //ReactDOM.unmountComponentAtNode()方法，参数为一个结点，调用方法会卸载该容器中的渲染
    }
    exportFile=()=>{//点击导出
      //一般都是先请求接口获取到文件地址然后调用事件(涉及跨域的使设置用代理解决)
      this.exportCallBack(url);
    }
    render() {
        return (
            <div>
                
                <button onClick={exportFile}>导出</button>
                {/* 放到末尾 */}
                <div id="exportBoxBank"></div> 
            </div>
        );
    }
}

export default Index9;