How to handle PDF file from Web API in AngularJS?

Question

I've this Web API post method to generate a PDF:

[HttpPost]
[Route("api/pdf")]
public HttpResponseMessage Post(CustomType type)
{
    StreamContent pdfContent = PdfGenerator.GeneratePdf();

    HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
    response.Content = pdfContent;
    response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
    response.Content.Headers.ContentDisposition.FileName = "PDFName.pdf"

    return response;
}

In AngularJS I would like to get this PDF-file like this:

$http.post("api/pdf", object).then(function (results) {
    var data = results.data;

    //TODO: got PDF, how to handle?

}, function (results) {
    console.log(results);
});

But how should I handle the PDF-data in AngularJS? On iPad I would like the PDF to gets opened, but if the file is downloaded or just opened on desktop doesn't matter.

EDIT1:

Using SaveAS JS library I'm able to make a working solution on desktop:

$http.post("api/pdf", object).then(function (results) {
    var data = results.data;

    var file = new Blob([data], { type: 'application/pdf' });
    saveAs(file, "test.pdf");

}, function (results) {
    console.log(results);
});

The file is being downloaded to my desktop directly, but this solution does, for some reason, not work in iOS. Nothing happens. See this JSFiddle.

Is there another way to display the PDF on my iPad without having to embed the file on my website?

Answer 1

As you are most probably aware, ios devices will not let you download and store a file to memory/disk, as you would do on a desktop/laptop.

Downloaded items must be opened by an app

As you are already working on an website, the browser seems a natural candidate.

---

As I surmise you do not wish to embed the pdf file inside your website, an alternative would be to open the pdf in a new browser tab.

If such a solution is acceptable for you, please check this SO post:

window.open() in an iPad

The provided solution does work, but only when Safari is configured so as not to block popups.

---

I am afraid this may well be the only viable option for you. Having the iPad store the pdf into apps like iBooks will not work, according to this post. It cannot be automated with javaScript.

---

To my knowledge, there is no perfect solution in this case, just a most acceptable solution: open the pdf in a new tab in the browser, if ios has been detected.

If you are interested in this compromise, and run into issues implementing it with window.open(), I'll be happy to help.

Answer 2

PDFs can be large and when dealing with such large chunk of bytes you should rather stream these bytes than gather somewhere into some variable.

Your server side code is already doing that job. But the content-type could be missing.

On the client side I recommend you to open in a separate window/tab as follows:-

window.open('http://yourapidomain/api/pdf','resizable,scrollbars');