it-swarm.com.de

So drucken Sie PDF von IFRAME wenn src = pdf?

Ich habe einen iframe, der direkt auf eine PDF Datei zeigen muss (keine Seite mit einer PDF):

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

Ich möchte das PDF in diesem iFrame drucken können

Bei anderen Fragen habe ich verschiedene Lösungen gefunden, die nicht meinen Anforderungen entsprechen:

  1. Im iframe muss eine Funktion vorhanden sein ( https://stackoverflow.com/a/473270/1246369 )
  2. Schlagen Sie vor, den Rahmen zu fokussieren und dann eine Druckaktion auszuführen ( https://stackoverflow.com/a/9616706/1246369 ).
  3. Greifen Sie auf das contentWindow des iframe zu und drucken Sie es aus ( https://stackoverflow.com/a/9617566/1246369 )
  4. Variationen davon

Es scheint jedoch, dass FireFox und IE dies nicht können, wenn der iFrame-Quellcode direkt auf ein PDF und nicht auf eine um das PDF gewickelte Seite verweist.

Firefox :

Anstatt zu drucken, wird der folgende Dialog angezeigt: "Verhindern, dass diese Seite zusätzliche Dialoge erstellt" mit den Schaltflächen "OK" und "Abbrechen", von denen keine die PDF-Datei druckt.

IE:

ignoriert nur meine Versuche, mit den oben genannten Methoden zu drucken.

Frage :

Wie kann ich Benutzern erlauben, das PDF im iFrame zu drucken, unabhängig davon, welchen Browser sie verwenden?

21
Asu

Ich habe ein bisschen gekämpft, um eine Lösung zu finden, die sowohl für IE als auch für Chrome funktioniert. Das funktioniert für mich:

$(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);
});

...Prost.

2
Svela

Wie in dieser Antwort für eine ähnliche Frage vorgeschlagen, können Sie Folgendes tun:

window.frames.pdfFrame.print();

Dies sollte Ihr Problem lösen.

1
bdadam

Das scheint zu funktionieren:

   <style type="text/css" media="print">
   body *{display:none}
   iframe{display:block}
   </style>

Also wird dann nur das pdf angezeigt?

0
Neutrino

Option 1: 

Ich habe dies nicht getestet, aber ich habe hier eine andere Antwort gefunden: https://stackoverflow.com/a/4096547/2528978

Angenommen, Sie könnten Folgendes verwenden:

<style type="text/css" media="print">
   body *{display:none}
   iframe{display:block}
</style>

Also wird dann nur das pdf angezeigt?

Option 2:

Erstellen Sie einen Hyperlink zu der PDF-Datei mit der Aufschrift "Drucken".

<a href='Path/To/PDF'>Print Me</a>

Hoffe das hilft...

-Under

0
Android334