【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);
  };