I have kind of a weird situation and would love some advice on the best course of action. I’m generating an xlsx file on the server and the way the user can get it is by clicking a link on an <a> tag. Once that happens it goes to the backend, generates the csv and express opens the download in the browser automatically for the user. I use this code to do that:
res.status(200)
.set("Content-Type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
.attachment(fileName)
.send(buffer)
what I’m trying to do is create a loader from when the user clicks the link, until the user clicks ‘save as’ or ‘cancel’ on the save as dialog box. Since there is no way to capture that event I’m forced to try some other options. My first thought is that instead of sending the request through the href on the a tag I’d just use axios or fetch to send the request. The problem there, is that the buffer when returned to the front end is somehow getting encoded differently and the file is corrupted. Option 1 would be to fix that on the front end so it comes through as expected and that way I can know when the response is coming through. I don’t really like this as a solution because it seems to cause even more inconsistencies between browsers, so I’d like express to take care of the encoding etc. The second possible solution I found was to set a cookie on the front end and have it be destroyed by the server, then just monitor the status of the cookie. This seems way too complicated for something that should be pretty simple! Is there some way to just globally monitor responses for a page, and do some action based on the header info because we’re getting back a 200 response when the download finishes, I just don’t know how to access it without also being in control of the response data.