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: stackoverflow.com/questions/21628378/… — David Tansey
– David Tansey, Commented Mar 25, 2015 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
– Manube, Commented Mar 25, 2015 at 17:35
This question has a few methods you can try stackoverflow.com/questions/26069378/… — Martin
– Martin, Commented Mar 31, 2015 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.get("api/pdf", { responseType: 'blob' }) — jaycer
– jaycer, Commented Mar 31, 2016 at 21:43

Community · Accepted Answer · 2017-05-23 10:32:40Z

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.

bhantol · Accepted Answer · 2015-04-01 15:13:11Z

1

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

answered Apr 1, 2015 at 15:13

bhantol

9,6368 gold badges48 silver badges85 bronze badges

Comments

a2800276 · Accepted Answer · 2015-04-01 10:53:33Z

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 1, 2015 at 10:53

a2800276

3,36624 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to handle PDF file from Web API in AngularJS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related