Found it somewhere long time ago and it works perfectly!

let payload = {
  key: "val",
  key2: "val2"
};

let url = "path/to/api.php";
let form = $('<form>', {'method': 'POST', 'action': url}).hide();
$.each(payload, (k, v) => form.append($('<input>', {'type': 'hidden', 'name': k, 'value': v})) );
$('body').append(form);
form.submit();
form.remove();

Solution

Content-Disposition attachment seems to work for me:

self.set_header("Content-Type", "application/json")
self.set_header("Content-Disposition", 'attachment; filename=learned_data.json')

Workaround

application/octet-stream

I had something similar happening to me with a JSON, for me on the server side I was setting the header to self.set_header("Content-Type", "application/json") however when i changed it to:

self.set_header("Content-Type", "application/octet-stream")

It automatically downloaded it.

Also know that in order for the file to still keep the .json suffix you will need to it on filename header:

self.set_header("Content-Disposition", 'filename=learned_data.json')

The Problems with Making your own events

Many of the solutions proposed on this article have the JavaScript run asynchronously and create a link element then calling

const a = documet.createElement("a") 
a.click()

or creating a mouse event

new MouseEvent({/* ...some config */})

This would seem fine right? What could be wrong with this?

What is an Event-Sourcing?

Event sourcing has a bunch of meanings across computing such as a system of pub sub in a cloud based architecture, or the browser api EventSource. In the context of a browser all events have a source and that source has hidden property that says who initiated this event (the user or the site).

Knowing this we can start to understand why two click events might not be treated the same

user click*          new MouseEvent()
-----------            -----------
| Event 1 |            | Event 2 |
-----------            -----------
     |                      |     
     |----------------------|
                 |
                 |
      ----------------------
      | Permissions Policy |    Available in chrome allows the server to control
      ----------------------    what features are going to be used by the JS
                 |
                 |
   ----------------------------
   | Browser Fraud Protection | The Browser REALLY doesnt like being told to pretend
   ---------------------------- to be a user. If you will remember back to the early
                 |              2000s when one click spun off 2000 pop ups. Well here
                 |              is where popups are blocked, fraudulent ad clicks are
                \ /             thrown out, and most importantly for our case stops 
                 v              fishy downloads
      JavaScript Event Fires

So I just Can't Download off A POST That's Dumb

No, of course you can. You just need to give the user a chance to create the event. Here are a number of patterns that you can use to create user flows that are obvious and convectional and will not be flagged as fraud. (using jsx sorry not sorry)

A Form can be used to navigate to a url with a post action.

const example = () => (
  <form
   method="POST"
   action="/super-api/stuff"
   onSubmit={(e) => {/* mutably change e form data but don't e.preventDetfault() */}}
  >
    {/* relevant input fields of your download */}
  </form>
)

Preloading If your download is non-configurable you may want to consider preloading the download into resp.blob() or new Blob(resp) this tells the browser that this is a file and we wont be doing any string operations on it. As with the other answers you can use window.URL.createObjectURL what is not mentioned is that

createObjectURL CAN MAKE A MEMORY LEAK IN JAVASCRIPTsource

If you don't want the C++ bully's to come make fun of you you must free this memory. Ahh but I'm just a hobbiest who loves his garbage collector. Have no fear this is very simple if you are working in most frameworks (for me react) you just register some sort of clean up effect on your component and your right as rain.

const preload = () => {
  const [payload, setPayload] = useState("")
  
  useEffect(() => {
    fetch("/super-api/stuff")
      .then((f) => f.blob())
      .then(window.URL.createObjectURL)
      .then(setPayload)

    return () => window.URL.revokeObjectURL(payload)
  }, [])


  return (<a href={payload} download disabled={payload === ""}>Download Me</a>)
}

I think I got close, but something is corrupting the file (Image), any way, maybe some one can disclose the problem of this approach

$.ajax({
            url: '/GenerateImageFile',
            type: 'POST',
            cache: false,
            data: obj,
            dataType: "text",
            success: function (data, status, xhr) {
                let blob = new Blob([data], { type: "image/jpeg" });

                let a = document.createElement('a');
                a.href = window.URL.createObjectURL(blob);
                a.download = "test.jpg";
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                window.URL.removeObjectURL(a.href);
            },
            complete: function () {

            },
            beforeSend: function () {

            }
        });

I liked Frank's idea and decided to do my own twist to it. As trying to do it in one post is very complicated, I'm using the two post method but only hitting the database once and no need to save the file or clean up file when completed.

First I run the ajax request to retrieve the data but instead of returning the data from the controller I will return a GUID that is tied to a TempData storage of the records.

$.get("RetrieveData", { name: "myParam"} , function(results){
    window.location = "downloadFile?id=" + results
});

public string RetrieveData(string name)
{
    var data = repository.GetData(name);
    string id = Guid.NewGuid().ToString();
    var file = new KeyValuePair<string, MyDataModel>(name, data);
    TempData[id]=file;
    return id;
}

Then when I call the window.location I pass the Guid to the new method and get the data from TempData. After this method is executed TempData will be free.

public ActionResult DownloadFile(string id)
{
   var file = (KeyValuePair<string,MyDataModel>)TempData[id];
   var filename = file.Key;
   var data = file.Value;
   var byteArray = Encoding.UTF8.GetBytes(data);
   ...
   return File(byteArray, "text/csv", "myFile.csv");
}