Ouvrir un PDF dans une fenêtre « modal » Bootstrap 4

Petit bout de code bien pratique avec le « Easy Modal Plugin » et jQuery 3.

Dans le cadre de mon travail de mise à niveau de mon gestionnaire de contenu neural, j’ai cherché à ouvrir un PDF dans une fenêtre « modal ». Pas tant pour consulter le PDF que pour avoir un aperçu dans la médiathèque. Quoi de mieux que d’utiliser la fenêtre « modal » de Bootstrap ou lieu d’ouvrir une nouvelle page ou pire perdre la page courante sous le PDF. J’ai « gossé » un peu sans succès. Simple à première vue, je me suis buté à un problèmes inexplicables. Bon, il y a tellement à faire, et il suffit d’une page Web pour passer à autre chose dans notre métier. J’ai donc abandonné mon détour pour revenir à mes moutons.

Mais dernièrement pour un autre projet (et une mise à niveau Bootstrap v4.0.0-alpha.3) je suis tombé sur ce petit bout de code, un plug-in Wordpress (vive l’« open source », le vrai, littéralement la communauté de développeurs qui se partagent le travail, point!!!).

application/pdf

Le secret, <object type="application/pdf" </object> qui devient le contenu du « modal » et le récepteur du « iFrame » avec surtout le type MIME application/pdf. Boyenne, j’aurais dû y penser! Il faut bien entendu que le navigateur utilise son propre plugiciel.

/*
* Le plug-in PDF
*/
(function(a){a.twModalPDF=function(b){...

$(function(){    
  $('.voir-pdf').on('click',function(){
    var sUrl = $(this).attr('href');
    var sTitre = $(this).attr('title');
    var sIframe = '<object type="application/pdf" data="'+sUrl+'" width="100%" height="500">Aucun support</object>';
    $.twModalPDF({
      title:sTitre,
      message: sIframe,
      closeButton:true,
      scrollable:false
    });
    return false;
  });
})

Il va sans dire que malgré ce script, la consultation reste ardue, dans si peut d’espace. Je tiens à préciser ici que le format de document PDF, inventé à l’époque pour partager des documents entre différentes plateformes incompatible, est aujourd’hui un mal nécessaire dans certain cas, souvent destiné à l’impression, souvent incompatible, notamment avec les mobiles. Mais avec ce code, on peut avoir une bonne aperçue du document, l’imprimer ou encore voir les vignettes et la table des matières...

NOTE : Outre un petit problème sans importance avec Chrome, il est compatible avec tous mes navigateurs Edge, Firefox. Noter par ailleurs dans cet exemple l’utilisation de la nouvelle version Bootstrap v4.0.0-alpha.3 mais aussi de la dernière librairie jQuery 3.0.

Code complet

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Test PDF</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<style>
/* Style Modal Bootstrap 4 */
.modal-content {background-color:#393633;}
.modal-header{border:none;background-color:#393633;color:#fff;border-radius:0;}
.modal-footer{padding:0;border:none;}
.modal-footer .btn-primary {width:100%;border-radius:0;background-color:#393633;border-color:#333;}
.modal-footer .btn-primary:hover {background-color:#000000;}
.modal-body {padding:0;background-color:#393633;}
</style>

  </head>
  <body>
    <h1>Test PDF</h1>
    <a class="btn btn-primary voir-pdf" title="Exemple de PDF dans un « modal »" href="...document.pdf">PDF</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
    <script>
/*
* Le plug-in PDF
*/
(function(a){a.twModalPDF=function(b){defaults={title:"PDF dans un « modal »",message:"Impossible d’ouvrir le document PDF",closeButton:true,scrollable:false};var b=a.extend({},defaults,b);var c=(b.scrollable===true)?'style="max-height: 1020px;overflow-y: auto;"':"";html='<div class="modal fade" id="oModalPDF">';html+='<div class="modal-dialog modal-lg">';html+='<div class="modal-content">';html+='<div class="modal-header">';html+='<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';if(b.title.length>0){html+='<h4 class="modal-title">'+b.title+"</h4>"}html+="</div>";html+='<div class="modal-body" '+c+">";html+=b.message;html+="</div>";html+='<div class="modal-footer">';if(b.closeButton===true){html+='<button type="button" class="btn btn-primary" data-dismiss="modal">Fermer</button>'}html+="</div>";html+="</div>";html+="</div>";html+="</div>";a("body").prepend(html);a("#oModalPDF").modal().on("hidden.bs.modal",function(){a(this).remove()})}})(jQuery);


  $(function(){    
    $('.voir-pdf').on('click',function(){
      var sUrl = $(this).attr('href');
      var sTitre = $(this).attr('title');
      var sIframe = '<object type="application/pdf" data="'+sUrl+'" width="100%" height="500">Aucun support</object>';
      $.twModalPDF({
        title:sTitre,
        message: sIframe,
        closeButton:true,
        scrollable:false
      });
      return false;
    });
  })
    </script>
  </body>
</html>

Avec l’objet du plugiciel PDF

C’est carrément le plugiciel PDF de votre navigateur, mais imbrique directement dans la page Web. Intéressant, quoique consulter un PDF dans un espace restreint n’a pas le même résultat qu’une vidéo. Le plus compliquer avec cette technique toute simple c’est l’aspect adaptatif tout en respectant les proportions.

Exemple avec Bootstrap

<style>
/* En combinaison avec l'embed-responsive de Bootstrap 4 */
.embed-responsive-1by2::before{padding-top:150%}
</style>
<div class="embed-responsive embed-responsive-1by2">
  <object data="[URL vers le PDF]" type="application/pdf">
    <p>Il semble que vous n’ayez pas de plugiciel PDF pour ce navigateur. Ouvrez directement le fichier <a href="[URL vers le PDF]">historique_des_prefets_de_1855_a_20xx.pdf</a>.</p>
  </object>
</div>

Sans Boostrap

<style>
.objet-conteneur {
  overflow: hidden;
  padding-top: 150%;
  position: relative;
}
 
.objet-conteneur object {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
</style>
<div class="objet-conteneur">
  <object data="[URL vers le PDF]" type="application/pdf">
    <p>Il semble que vous n’ayez pas de plugiciel PDF pour ce navigateur. Ouvrez directement le fichier <a href="[URL vers le PDF]">historique_des_prefets_de_1855_a_20xx.pdf</a>.</p>
  </object>
</div>

Avec le widget Google

Rien de plus simple que de le faire directement chez Google. Par contre, c’est un bête iFrame, c’est-à-dire que votre visiteur doit envoyer l’adresse chez Google qui ouvre le document et retourne une page dans le iFrame, 3 requêtes supplémentaires pour faire ce que votre navigateur fait déjà. L’avantage avec cette technique c’est que l’usager n’a pas besoin d’avoir un lecteur ou plugiciel PDF d’installé...

ATTENTION AVEC LE BON ET BEAU GOOGLE. Un jour viendra inévitablement où Google vous demandera de payer la facture... Pensez à Google Map. J’ai personnellement développé pendant 15 ans des outils et des cartes dynamiques selon les règles de Google. En fait, j’ai carrément développé bénévolement pour Google qui m’a remercié en m’envoyant l’année dernière une facture si je voulais continuer à utiliser ce travail ! Un coup chien comme on dit par ici. Plusieurs milliers de dollars pour continuer à utiliser ce service. Tout est aujourd’hui à la poubelle ! Et l’on trouve aujourd’hui partout des cartes Google avec la mention erreur, exactement comme Twitter qui a un jour décidé d’arrêter le pourtant fantastique et libre RSS pour s’assurer un contrôler total. Pas la peine de vous dire que j’ai aussi cessé toute activité avec Twitter... Alors, en évitant d’utiliser Google, non seulement vous éviter de devoir payer un jour le géant qui ne se gène pas pour utiliser chaque jour vos données personnelles tout à fait gratuitement, mais vous favoriser l’émergence d’initiative indépendante...

Exemple avec Google

<iframe src="http://docs.google.com/viewer?url=[URL vers le PDF]&embedded=true" width="600" height="780" style="border: none;"></iframe>

Trucsweb.com

Javascript

Bootstrap

Ouvrir un PDF dans une fenêtre « modal » Bootstrap 4

Petit bout de code bien pratique avec le « Easy Modal Plugin » et jQuery 3.

application/pdf

Code complet

Avec l’objet du plugiciel PDF

Exemple avec Bootstrap

Sans Boostrap

Avec le widget Google

Exemple avec Google

Commentaires

En ligne depuis 27 ans (1997-2024)

RSS

Aider les Trucsweb

Bootstrap - Trucsweb

jQuery - Trucsweb

Oznog

Connexion

Connexion

Mot de passe perdu

Connexion

Conditions générales

Conditions

Responsabilité

Droit applicable et juridiction compétente

Trucsweb

Glossaire

Trucsweb

Trucsweb

Conditions

Aucun message!

Créer un compte

Créer un compte

Trucsweb.com

Javascript

Bootstrap

Ouvrir un PDF dans une fenêtre « modal » Bootstrap 4

Petit bout de code bien pratique avec le « Easy Modal Plugin » et jQuery 3.

application/pdf

Code complet

Avec l’objet du plugiciel PDF

Exemple avec Bootstrap

Sans Boostrap

Avec le widget Google

Exemple avec Google

Commentaires

En ligne depuis 27 ans (1997-2024)

RSS

Aider les Trucsweb

Bootstrap - Trucsweb

jQuery - Trucsweb

Étiquettes

outils

Références

Oznog

Connexion

Connexion

Conditions

Responsabilité

Droit applicable et juridiction compétente

Conditions

Aucun message!

Créer un compte