Trucsweb.com

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>
, 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

    2017-01-01 21:47:35
    • 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
      2017-01-17 13:31:52


    7/10 sur 1 revues.
           Visites : 755 - Pages vues : 785
    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

    .
    @