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

##【React】【下载功能实现总结】结合GET或POST请求接口，下载服务器端文件         在平常系统开发中，最常见的是结合使用GET请求方式的接口实现excel等文件的下载导出。（下面将给出GET方法）。那如果后台给你post接口让你实现下载功能又将怎么写呢？在react的技术栈下，下面将给出这两种的实现方法。

<Button onClick={this.download}>下载</Button>

【GET请求接口】使用window.open

打开新的标签页的方式 get方法，如果要带参数的，直接在query上传递参数，可有多个参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。

download = () => {
    window.open(`/react/get/downloadPdf?id=${this.props.id}&name=${this.props.name}`)
};

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

使用ReactDOM创建临时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);
  };

转载于:https://my.oschina.net/u/3682731/blog/1835385