web-dev-qa-db-fra.com

Comment imprimer PDF depuis IFRAME si src = pdf?

J'ai un iframe qui doit pointer directement vers un fichier PDF (pas une page avec un PDF):

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

Je veux pouvoir imprimer le PDF dans cet iFrame

J'ai trouvé plusieurs solutions à d'autres questions qui ne répondent pas à mes besoins:

  1. Nécessité d'avoir une fonction dans l'iframe ( https://stackoverflow.com/a/473270/1246369 )
  2. Suggérez de focaliser le cadre, puis effectuez une action d'impression dessus ( https://stackoverflow.com/a/9616706/1246369 )
  3. Accédez au contenuWindow de l’iframe et imprimez-le ( https://stackoverflow.com/a/9617566/1246369 )
  4. Variations de ceux

Cependant, il semble que FireFox et IE ne puissent pas le faire si le point src de l'iframe pointe directement vers un PDF et non vers une page entourant le fichier PDF.

Firefox :

Au lieu d’imprimer, il affiche cette boîte de dialogue: "Empêchez cette page de créer des boîtes de dialogue supplémentaires" avec les boutons "OK" et "Annuler", qui n’imprègnent pas le PDF.

IE:

ignore simplement mes tentatives d'impression en utilisant les méthodes ci-dessus.

Question :

Comment autoriser les utilisateurs à imprimer le PDF dans iFrame, quel que soit le navigateur utilisé?

javascriptpdfiframeprinting
21
Asu

J'ai eu du mal à trouver une solution qui fonctionne à la fois pour IE et Chrome. Cela fonctionne pour moi:

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

...à votre santé.

2
Svela

Comme suggéré dans cette réponse pour une question similaire , vous pouvez le faire:

window.frames.pdfFrame.print();

Cela devrait résoudre votre problème.

1
bdadam

Cela semble fonctionner:

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

Alors seulement le pdf est affiché?

0
Neutrino

Option 1: 

Je n'ai pas testé cela, mais j'ai trouvé une autre réponse ici: https://stackoverflow.com/a/4096547/2528978

En supposant que vous puissiez utiliser les éléments suivants:

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

Alors seulement le pdf est affiché?

Option 2:

Créez un lien hypertexte vers le fichier pdf qui dit "Imprimez-moi"

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

J'espère que cela t'aides...

-Andrew

0
Android334