Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

Javascript

Bootstrap

RDFFav

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

Petit bout de code bien pratique avec le « Easy Modal Plugin » et jQuery 3.Acrobat, PDF, jQuery, Bootstrap 4, Modal

Modal PDF
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>
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Merci et encore merci je tombe sur votre page en googlant su le javascript et l’incrémentation des ID et je trouve ce script qui tombe a point nomee
    64x64
    melissa

    Date (GMT) : 2017-01-01 21:47:35 (UTC +0000)
    • Effectivement, quand je suis tombé sur ce petit bout de code je n'ai pas pu m'empêcher de le partager.
      64x64
      oznog
      http://www.trucsweb.com
      Date (GMT) : 2017-01-17 13:31:52 (UTC +0000)


    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    7/10 sur 1 revues.
           Visites : 5849 - Pages vues : 6016
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @