Print Embedded Pdf from Browser With Javascript, Html5, Angularjs

Print embedded PDF from browser with Javascript, HTML5, AngularJS

Also answered here: Print Pdf from javascript embed tag

I'm going to post what I learned here after a lot of research for anyone in the future who might find this.

PDF's are displayed differently based on browser, browser version, browser configuration, and Operating System. There are a lot of variables so I'll talk about the most common situations here.

• On all browsers I was unable to call any sort of print() method through Javascript, I was only able to use PdfActions. The OPENACTION would call print. I embedded these into the PDF using iText.

• Chrome uses Adobe's viewer, which doesn't give access to any sort of print() method but does execute PdfActions embedded in the PDF. So you can embed an 'OpenAction' in a PDF and have the PDF call print whenever it's opened from any application that looks at those actions.

• Firefox (above a certain version, all recent versions though) uses the Adobe viewer in Windows, which also recognizes PdfActions. However, in OSX it loses support for the Adobe viewer and switches to the baked in Firefox viewer (pdf.js). Which does not support PdfActions.

• IE: I didn't really test much on IE. Mostly because I gave up on printing PDF's from Javascript after Firefox didn't work on OSX (a req. for me).

My PDF's were being generated by a server that I control so I ended up making service changes in my server and adding a get PNG service that generated a PNG based on the same markup that the PDF generation uses. Browsers handle images much better than PDFs, which I knew going in, but hoped that I would just be able to re-use the PDF generation service since it's used elsewhere in my code.

It doesn't answer the question, but it's all the information I have. My suggestion to anyone who might find this in the future: ditch PDF if possible in this case and go simpler. Otherwise, please update this question if you know how to call print() through Javascript in FF preview pdf viewer in OSX.

-Phil

Silent print an embedded PDF

You are not going to be able to print silently with plain old JavaScript. How would you like your printer to start printing out 100000000 pages of all black. Not a good thing. If you want to print silently and have it work for Internet Explorer only, there are ActiveX controls out there that can do it. This requires higher security settings for your page and for your users to really trust your site.

Print a pdf without visually opening it

UPDATE: This link details an elegant solution that involves editing the page properties for the first page and adding an action on Page Open. Works across all browsers (as browsers will execute the JavaScript placed in the actions section). Requires Adobe Acrobat Pro.

---

It seems 2016 brings no new advancements to the printing problem. Had a similar issue and to make the printing cross-browser I solved it using PDF.JS but had to make a one-liner addition to the source (they ask you to build upon it in anyways).

The idea:

• Download the pre-built stable release from https://mozilla.github.io/pdf.js/getting_started/#download and add the "build" and "web" folders to the project.
• The viewer.html file is what renders out PDFs with a rich interface and contains print functionality. I added a link in that file to my own JavaScript that simply triggers window.print() after a delay.

The link added to viewer:

    <script src="viewer.js"></script>
    <!-- this autoPrint.js was added below viewer.js -->
    <script src="autoPrint.js"></script>
</head>

The autoPrint.js javascript:

(function () {
    function printWhenReady() {
        if (PDFViewerApplication.initialized) {
            window.print();
        }
        else {
            window.setTimeout(printWhenReady, 3000);
        }
    };

    printWhenReady();
})();

• I could then put calls to viewer.html?file= in the src of an iframe and hide it. Had to use visibility, not display styles because of Firefox:

  <iframe src="web/viewer.html?file=abcde.pdf" style="visibility: hidden">
  

The result: the print dialog showed after a short delay with the PDF being hidden from the user.

Tested in Chrome, IE, Firefox.

How to Display blob (.pdf) in an AngularJS app

First of all you need to set the responseType to arraybuffer. This is required if you want to create a blob of your data. See Sending_and_Receiving_Binary_Data. So your code will look like this:

$http.post('/postUrlHere',{myParams}, {responseType:'arraybuffer'})
  .success(function (response) {
       var file = new Blob([response], {type: 'application/pdf'});
       var fileURL = URL.createObjectURL(file);
});

The next part is, you need to use the $sce service to make angular trust your url. This can be done in this way:

$scope.content = $sce.trustAsResourceUrl(fileURL);

Do not forget to inject the $sce service.

If this is all done you can now embed your pdf:

<embed ng-src="{{content}}" style="width:200px;height:200px;"></embed>

Embed PDF on a webpage and prevent download

2017 Note: this feature has moved locations and the implementation has changed since it was originally answered.

---

Google Viewer offers a solution.

Use the iframe it generates for you.

---

Related Topics