React 下载功能【导出】实现方法

React 下载功能【导出】实现

【Get请求接口】

通过Get是比较容易下载文件的，只需要使用window.open即可实现。但假如需要传递的参数过多，则不适合使用；同时使用这种方式url也会显得臃肿。

window.open(‘下载url’)

如果url中需要带参数，则可以直接在query上添加参数即可；假如有多个参数，参数与参数之间通过&进行连接。

###【POST请求接口】动态创建form临时表单

// 隐藏的div Dom结构，用于存放临时form
<div id="downloadDiv" style={{ display: 'none' }} />

// 导出数据处理函数
download = () => {
	const {date} = this.state;
    // 结合隐藏form表单进行react和post接口下载数据
    let divElement = document.getElementById('downloadDiv');
    ReactDOM.render(
      <form action="/api/post/export" method="post" target="_blank">
        <input name="date" type="text" value={date} />     // 变量参数值
        <input name="status" type="text" value="1" />
      </form>,
      divElement
    );
    ReactDOM.findDOMNode(divElement)
      .querySelector('form')
      .submit();
    ReactDOM.unmountComponentAtNode(divElement);
  };

上述方式暂未在项目中真实使用，也可以使用下述函数作为公共函数使用即可（其实也是通过创建form临时表单实现）。

// url为接口地址, params为需要传递的参数，此时后端接收的格式为formData
export const onDownloadData = (url, params)=> {
    const formElement = document.createElement('form');
    formElement.style.display = 'display:none;';
    formElement.method = 'post';
    formElement.action = url;
    formElement.target = 'callBackTarget';
    const inputElement = document.createElement('input');
    inputElement.type = 'hidden';
    inputElement.name = 'params';
    inputElement.value = params;
    formElement.appendChild(inputElement);
    document.body.appendChild(formElement);
    formElement.submit();
    document.body.removeChild(formElement);
}

实际项目中真正使用并没问题。

参考文章：

1. 【React】【下载功能实现总结】结合GET或POST请求接口，下载服务器端文件 转

   https://my.oschina.net/u/3682731/blog/1835385

2. 前端接受后端文件流并下载的几种方法

   https://juejin.im/post/5c1610cae51d455c627a967e#heading-8

3. React使用Post方式从服务器下载文件

   https://blog.csdn.net/jiangkai528/article/details/78852777