Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to print PDF from IFRAME if src = pdf?

Tags:

I have an iframe which needs point directly to a PDF file (not a page with a PDF):

<iframe id="ecard-pdf" name="ecard-pdf" style="position: absolute;" src="/profile.pdf"> </iframe> 

I want to be able to print the PDF in this iFrame

I have found several solutions in other questions that do not fit my needs:

  1. Require to have a function in the iframe ( https://stackoverflow.com/a/473270/1246369 )
  2. Suggest focusing the frame and then performing print action on it ( https://stackoverflow.com/a/9616706/1246369 )
  3. Access contentWindow of the iframe and print it ( https://stackoverflow.com/a/9617566/1246369 )
  4. Variations of those

However, it seems that FireFox and IE can't do this if the iframe's src points directly to a PDF and not to a page wrapped around the PDF.

Firefox:

Instead of printing, it displays this dialog: "Prevent this page from creating additional dialogues" with "OK" and "Cancel" buttons, neither of which prints the PDF.

IE:

just ignores my attempts to print using the above methods.

Question:

How can I allow users to print the PDF in the iFrame no matter what browser they are using?

like image 322
Asu Avatar asked Dec 01 '12 04:12

Asu


People also ask

How do I display a PDF in iframe?

Right-click on the link in the href attribute and click Copy link address. Create a new Text content block. Click the Embed Media icon and embed the HTML code in an iframe that points to the PDF URL you noted in step 3. Click the checkmark to see the PDF displayed in the newly created iframe.

How do you display a PDF using an iframe and make it responsive?

All you need to do is add #view=fitH to the end of the source attribute. That's it! fitH stands for fit horizontal, and this will make the PDF in our iframe fit the width of the screen.

Does iframe work with PDF?

Due to its wide compatibility, the iframe tag is widely used for embedding pdf. A browser that does not support PDF documents or the object tag can also use this tag to embed a pdf HTML code.


2 Answers

I have struggled a bit to find a solution that works for both IE and Chrome. This works for me:

$(function() {     var ua = window.navigator.userAgent;     var msie = ua.indexOf('MSIE ');     var trident = ua.indexOf('Trident/');     var edge = ua.indexOf('Edge/');     var url = '/url/to/file.pdf';     var pdf ='';     var style = 'position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;';      if(msie > 0 || trident > 0 || edge > 0){         pdf = '<object data="' + url + '" name="print_frame" id="print_frame" style="' + style + '" type="application/pdf">';     }     else{         pdf ='<iframe src="' + url + '" name="print_frame" id="print_frame" style="' + style + '"></iframe>';     }      $(document.body).append(pdf);      setTimeout(function(){         window.frames["print_frame"].focus();         window.frames["print_frame"].print();     },2000); }); 

...cheers.

like image 110
Svela Avatar answered Oct 17 '22 16:10

Svela


As suggested in this answer for a similar question, you could do this:

window.frames.pdfFrame.print(); 

This should solve your problem.

like image 23
bdadam Avatar answered Oct 17 '22 17:10

bdadam