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?

Have you seen this post: http://stackoverflow.com/questions/21628378/angularjs-display-blob-pdf-in-an-angular-app — David Tansey, Mar 25 '15 at 16:17
Dennis, you should check the post suggested above by @DavidTansey, it tells you how to use arraybuffer, $sce and embed to fetch and display pdf files in your angularjs apps — Manube, Mar 25 '15 at 17:35
This question has a few methods you can try http://stackoverflow.com/questions/26069378/angularjs-dynamic-download-from-response — Martin, Mar 31 '15 at 18:07
I was doing a GET and had to pass in `{ responseType: 'blob' }` to get AngularJS to stop corrupting my PDF. [Gleaned from here](http://stackoverflow.com/questions/28585353/how-can-i-encrypt-and-decrypt-a-pdf-blob-with-forge-and-store-in-localstorage) `$http.get("api/pdf", { responseType: 'blob' })` — jaycer, Mar 31 '16 at 21:43

score 3 · Accepted Answer · edited May 23 '17 at 10:32

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.

score 1 · Answer 2 · answered Apr 01 '15 at 15:13

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');

score 0 · Answer 3 · answered Apr 01 '15 at 10:53

0

It seems the server is not setting the mime-type of the response to application/pdf. Try adding a "Content-Type" header to the http response and ipad should open the pdf in the associated app.

answered Apr 01 '15 at 10:53

a2800276

3,272
22
33

How to handle PDF file from Web API in AngularJS?

3 Answers3