Prompt file download

Question

I have a link on my page on click of which I am trying to generate a PDF document and then show the "Open - Save" prompt on the browser.

My HTML (reactjs component) has the below code where onclick calls the _getMyDocument function which then calls a Webapi method.

 <div className="row">
     <a href="#" onClick={this._getMyDocument.bind(this)}>Test Link</a>
 </div>  

_getMyDocument(e) {
            GetMyDocument(this.props.mydata).then(()=> {
   }).catch(error=> {

  });

My Controller has the below code

[HttpPost]
[Route("Generate/Report")]
public IHttpActionResult GetMyReport(MyData myData)
 {  
    byte[] myDoc = MyBusinessObject.GenerateMyReport(myData);
    var result = new HttpResponseMessage(HttpStatusCode.OK)
        {
            Content = new ByteArrayContent(myDoc)
        };
        result.Content.Headers.ContentDisposition =
            new ContentDispositionHeaderValue("attachment")
            {
                FileName = "MyDocument.pdf"
            };
        result.Content.Headers.ContentType =
            new MediaTypeHeaderValue("application/octet-stream");

        var response = ResponseMessage(result);

        return response;
  }

Currently all the code executes but I don't get the file PDF download prompt. What am I doing wrong here?

Response object on success from the ajax call lokks like below

Answer 1

Your response from the server looks good. The missing part is that you are not handling this response from the client side in the correct way.

Lets assume that your resource url object looks like below in js. (i.e. you already know the resource url, if you don't know it yet, then you will need a separate call to the server to know the download url)

response.downloadUrl = app/media/fileId/document.pdf

All you need to do is set,

window.location = item.downloadUrl;

This will cause the browser to request a resource from the server, the response from the server must include Content-Disposition:attachment;. It will cause the browser to show the download dialog.

P.S. I have recently worked on a similar functionality. If you have questions please ask.

When you want to force the browser to show the download prompt for some files (or resources), you must include Content-Disposition:attachment; in the response header (which you already did).

Answer 2

A simple way to do this is on your server to use GET method, and receive your data by query parameters.

Then in your client app you just have to create a classic link:

<a href="http://your-server.com/your-resource?param1=123&param2=456">Test Link</a>

Or use that simple js script if your want to manage it from your script logic:

window.open("http://your-server.com/your-resource?param1=123&param2=456");