How to use POST request to implement browser download EXCEL function .Or, should I not use POST?-CodePudding

I have done some EXCEL file export functions before, but they are all implemented using GET requests. The method I use is like this

// export excel module
handleExportTemplate:_debounce(function(){
  window.location.href = process.env.BASE_API   `/export/excelDownload`
}),

I used the [window.location.href] method to let the browser download Excel automatically, but today the back-end engineer asked me to use a POST request and pass the parameters to him in the body. The data is similar to this:

data:{
userIdList:["1","2","3","4","5"],
ifShow:true,
ifDownLoadNow:true,
}

but using window.location.href, I don't know how to return these parameters to the backend engineer

In addition, I tried sending it to him using a normal POST request, and he did successfully return a file to me, but I couldn't get the browser to download it automatically through window.location.href

I tried to convince him to use GET request for this function, but he won't listen to me. Is it really appropriate to use POST for download requests? Is he wrong or I know too little? If it's my fault, how can I complete the POST request and be able to download EXCEL?

CodePudding user response：

There is no problem in using a POST request to download a file. Especially when you create your file with many data. In that case, a get request is limited in length, where a POST is not.

I do not know any way to send a POST request using only window.location.href, but what you want can be achieved with JavaScript.

One way is to use the fetch API :


const resp = await fetch('/your/url',{ method : 'POST', body : { /**@ your data **/ } });
const fileContent = await resp.text();

And then, you can make the browser download the file by using a function like this :

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,'   encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

It will create an invisible link temporarily with the download attribute and automatically click it to download the in-memory file.