javascript – Download the file stream as it is generated

Scenario

We are building a user interface that allows users to query our data en masse. The return format is CSV and there is a decent amount of processing to perform. This processing is done in parallel, then sets of lines are returned to the user interface.

Current implementation

An AJAX POST request is sent to the server, it waits for all data to be entered and then uses createObjectURL to trigger a download. The problem is that the request may take several minutes and the user sees a rotating indicator indicating that its request is in progress.

Problem

It's a bad experience that the user can not see any further progress and has no idea if his request is being processed or how long it will take.

Goal

For the browser to download the file during streaming to the client.

Obstacle

It does not seem possible to enable this behavior in JavaScript. The closest script I found was a StreamSaver.js script but using an external MITM is not acceptable and I do not understand enough code to determine s & # 39 it is a viable (or even good) approach.

Other ideas

  • Use a GET request or form. The problem is twofold: (1) The data of the request can be nested and of variable length. It does not seem right to have to parse a query string on the backend. (2) It seems like this causes a page reload, which kills the state of the React application.

  • Instead of downloading the file continuously to the client, we can add a progress bar. To be that, we could add a header to the answer indicating the number of pieces expected, then increment it upon receipt of each piece. The disadvantage of this approach is that the user can not cancel the request and can not retrieve partial results.

Help me

I have the impression of missing a much better solution to this problem. Do not hesitate to dispute the above assumptions. My main goal is to get a clean solution offering a good user experience.

Remarks

The backend is a C # web application, React is used in front-end, and it is possible to navigate through a PHP layer if it could help.