React uses post to download files from the server and finds that there is a problem with the browser.

download files from server in react

Baidu found a big cow to write and use it on the project. With Google and IE test, you can download files normally. There will be problems with 360browser, and page switching will miraculously enter the callback of click event downloadDetailData, that is, it will trigger the download of files again. Other browsers will not, but this problem will appear in 360browsers to solve the problem. Or if you have used other methods in the project, can you share it

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

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);
}
render() {
  <div>
    <div id="downloadDiv" style={{display:"none"}}> </div>
    <Button type="primary" onClick={this.downloadDetailData}></Button>
  </div>
}
Apr.02,2021

download a file, it's not that troublesome.
this download file is for us, and there is no problem:
download


File download can use this https://github.com/azl3979858.


found another version on the Internet and found it feasible for the project. Other browsers tested it and found no problem for the time being

let formElement = document.createElement ('form');
formElement.style.display = "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);
br < formElement.submit (); > formElement.submit ();

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3a462-2ba49.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3a462-2ba49.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?