鍍金池/ 問答/HTML/ 怎么使用form表單通過Post方式從服務器下載文件 React

怎么使用form表單通過Post方式從服務器下載文件 React

下面一種方法百度出來的，試了下發(fā)現(xiàn)不行

// 3.1）首先在react組件的render函數(shù)里面建立一個隱藏的div ，例如：
<div id='downloadDiv' style={{display:'none'}}></div>  

//3.2 )  用戶在頁面上觸發(fā)下載按鈕后，執(zhí)行以下函數(shù)：在隱藏的div里面創(chuàng)建臨時表單，獲取表單，提交表單，在div節(jié)點卸載臨時表單。

downloadDetailData=()=>{  
  
var divElement= document.getElementById("downloadDiv");  
var downloadUrl=`${apiBasePath}/api/xxxxx/downloadDetailData`;  
var params=JSON.stringify({  
     key:'value'  
})  
ReactDOM.render(  
      <form action={downloadUrl} method="post">  
        <input name="params" type="text" value={params}/>   
      </form>,  
      divElement  
  )  
ReactDOM.findDOMNode(divElement).querySelector('form').submit();  
ReactDOM.unmountComponentAtNode(divElement); 
 
}
回答
編輯回答
念舊

看人家返回給你的是什么內(nèi)容了，如果是blob，這樣

jsFileDownload (filename, data, mime) {
    let blob = new Blob([data], {type: mime || 'application/octet-stream'})
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      window.navigator.msSaveBlob(blob, filename)
    } else {
      var blobURL = window.URL.createObjectURL(blob)
      var tempLink = document.createElement('a')
      tempLink.style.display = 'none'
      tempLink.href = blobURL
      tempLink.setAttribute('download', filename)
      if (typeof tempLink.download === 'undefined') {
        tempLink.setAttribute('target', '_blank')
      }
      document.body.appendChild(tempLink)
      tempLink.click()
      document.body.removeChild(tempLink)
      window.URL.revokeObjectURL(blobURL)
    }
  }

如果是url，那就很簡單了，沒必要我寫了

2018年2月17日 20:36
編輯回答
局外人
let formElement = document.createElement('form');
formElement.style = "display:none;";
formElement.method = 'post';
formElement.action = `${apiBasePath}/api/xxxxx/downloadDetailData`;
formElement.target = 'callBackTarget';
let 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);
2017年10月11日 09:13