Afficher une liste de pdfs sur application web

andyandy1 Messages postés 8 Statut Membre -  
captain-coder Messages postés 8 Statut Membre -
Bonjour à toutes et a tous, je sollicite votre aide pour résoudre un problème que j'ai , je veux afficher une liste de pdfs sur ma page web comme c'est affiché sur l'image jointe de la maquette du projet, jusqu’à maintenant j'arrive a afficher un seul pdf a l'aide de ce code : 
<table>
 <tr>
  <td><FONT color="black">  <b><big>Dossier N°1</big></b> </FONT> </td>
 </tr>
 <tr>
  <td>
   <iframe src=""quot;pdfs/Itu37276_en_certificate.pdf" width="800" height="600" align="middle"></iframe>
  </td>
 </tr>
</table>

mais pour afficher plusieurs en même temps sous forme de liste , je suis bloqué dessus , veuillez voir l'image jointe pour comprendre ce que je veux faire.
Merci d'avance

2 réponses

  1.
    captain-coder Messages postés 8 Statut Membre 1
     
    Bonjour, c'est très simple, il te faut créer une liste (celle à gauche sur ta maquette) qui contiendra la liste des documents PDF de cette manière par exemple: 

    <ul id="pdf-list">
        <li data-toggle="chemin_du_pdf">Un document PDF</li>
        <!-- etc... -->
    <li>


    Ensuite il te faut donner un ID à ton ifram, dans notre cas ce sera pdf-viewer. Nous allons ensuite utiliser Jquery pour permettre le changement de l'attribut src de ton iframe: 


        $(document).ready(function(){
            $("#pdf-list>li").click(function(){
                $("#pdf-viewer").attr("src", $(this).attr("data-toggle"));
            });
        });


    Voilà tu peut adapter ce code :)
    1
    1. andyandy1 Messages postés 8 Statut Membre
       
      Merci beaucoup captain je vais essayer ta solution
      0
    2. captain-coder Messages postés 8 Statut Membre 1
       
      Aucun de problème, dit moi si ça fonctionne !
      0
    3. andyandy1 Messages postés 8 Statut Membre
       
      ca n'a pas marché mais j'ai trouvé une solution qui m'affiche les pdfs en liste sauf que j'ai pas le droit de cliquer sur le pdf pour le visualiser en entier , voici le code 

      <div id="bloc_page">
                 <aside>
                 <tr>
      		<td><FONT color="black">  <b><big>PDF N°1</big></b> </FONT> </td>
      	</tr>
                 <iframe name=FRAME1  src=""quot;pdfs/------.pdf" width="200" height="200" align="middle"></iframe> 
                 <tr>
      		<td><FONT color="black">  <b><big>PDF N°2</big></b> </FONT> </td>
      	</tr>
                 <iframe name=FRAME1  src=""quot;pdfs/------.pdf" width="200" height="200" align="middle"></iframe> 
                 <tr>
      		<td><FONT color="black">  <b><big>PDF N°3</big></b> </FONT> </td>
      	</tr>
                 <iframe name=FRAME1  src=""quot;pdfs/--------.pdf" width="200" height="200" align="middle"></iframe>

                 </aside>
                 <div id="cont_all">
      0
    4. captain-coder Messages postés 8 Statut Membre 1
       
      Attends, je ne comprend pas bien, tu créer un iframe pour chaque document PDF ?
      0
    5. andyandy1 Messages postés 8 Statut Membre > captain-coder Messages postés 8 Statut Membre
       
      c'est ce que j'ai pu faire , tout ca ca me soul je suis vraiment énervé
      0
  2. dugenou Messages postés 6262 Statut Contributeur 1 455
     
    Bonjour,

    Tu peux utiliser les fonctions PHP opendir() et readdir() pour lire le contenu du dossier qui contient tes fichiers PDF, puis, ensuite afficher le contenu : 

    <?php
$rep = "nom_du_dossier";

// Creation de l'index des fichiers
$dbfiles = array();
$i = 0;
$dossier = opendir($rep);
while ($fichier = readdir($dossier)) {
  if (is_file($rep."/".$fichier)) {
    if ($fichier != "index.php") {
      $dbfiles[$i][0] = $fichier;
      $path_parts = basename($fichier);
      $path_parts = substr($path_parts,strrpos($path_parts,".")+1);
      $i++;
    }
  }
}
closedir($dossier);
@sort($dbfiles);
?>

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">	
<title>Partage de fichiers</title>
</head>
<body>
<div style="text-align: center;">	
<h3>Fichiers disponibles</h3>
<?php
for ($i = 0; $i < count($dbfiles); $i++) {
?>
<p><a href="<?php echo $rep." rel="nofollow noopener noreferrer" target="_blank"/".$dbfiles[$i][0]; ?>" target="_blank"><?php echo $dbfiles[$i][0]; ?></a></p>
<?php
}
?>
</div>
</body>
</html>


    Il faut remplacer (ligne 2) nom_du_dossier par le nom du dossier qui contient les fichiers PDF et retirer rel="nofollow noopener noreferrer" (ligne 34), que CCM met systématiquement.

    Le fichier qui contiendra ce code, doit avoir une extension php

    0
    1. captain-coder Messages postés 8 Statut Membre 1
       
      Bonjour, je pense que le but est d'effectuer l'opération sans que la page charge à nouveau.
      0
    2. andyandy1 Messages postés 8 Statut Membre
       
      Merci pour ta réponse , mais je ne travail pas avec php , je suis sur JAVA, eclipse
      0
    3. captain-coder Messages postés 8 Statut Membre 1
       
      Mon code marche très bien:

      index.html: 

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>

<ul id="pdf-list">
    <li datatype="1.pdf">Document 1</li>
    <li datatype="2.pdf">Document 2</li>
</ul>

<br><br>

<iframe id="pdf-viewer" src=""quot;1.pdf"></iframe>

<script src=""quot;https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.[/contents/577-javascript-introduction-au-langage-javascript js]"></script>
<script src=""quot;test.js"></script>
</body>
</html>


      test.js: 

      $(document).ready(function(){
    $("#pdf-list li").click(function(){
        $("#pdf-viewer").attr("src", $(this).attr("datatype"));
    });
});




      Ce code la fonctionne très bien tu as juste à le mettre en forme ^^
      0