Afficher une liste de pdfs sur application web

Fermé
andyandy1 Messages postés 7 Date d'inscription lundi 4 mai 2015 Statut Membre Dernière intervention 8 février 2017 - Modifié par andyandy1 le 6/02/2017 à 15:23
captain-coder Messages postés 8 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 8 février 2017 - 8 févr. 2017 à 15:21
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
A voir également:

2 réponses

captain-coder Messages postés 8 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 8 février 2017 1
8 févr. 2017 à 11:13
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
andyandy1 Messages postés 7 Date d'inscription lundi 4 mai 2015 Statut Membre Dernière intervention 8 février 2017
8 févr. 2017 à 12:20
Merci beaucoup captain je vais essayer ta solution
0
captain-coder Messages postés 8 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 8 février 2017 1
8 févr. 2017 à 12:23
Aucun de problème, dit moi si ça fonctionne !
0
andyandy1 Messages postés 7 Date d'inscription lundi 4 mai 2015 Statut Membre Dernière intervention 8 février 2017
8 févr. 2017 à 13:59
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
captain-coder Messages postés 8 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 8 février 2017 1
8 févr. 2017 à 14:25
Attends, je ne comprend pas bien, tu créer un iframe pour chaque document PDF ?
0
andyandy1 Messages postés 7 Date d'inscription lundi 4 mai 2015 Statut Membre Dernière intervention 8 février 2017 > captain-coder Messages postés 8 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 8 février 2017
8 févr. 2017 à 14:32
c'est ce que j'ai pu faire , tout ca ca me soul je suis vraiment énervé
0
dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
8 févr. 2017 à 14:54
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
captain-coder Messages postés 8 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 8 février 2017 1
8 févr. 2017 à 15:06
Bonjour, je pense que le but est d'effectuer l'opération sans que la page charge à nouveau.
0
andyandy1 Messages postés 7 Date d'inscription lundi 4 mai 2015 Statut Membre Dernière intervention 8 février 2017
8 févr. 2017 à 15:06
Merci pour ta réponse , mais je ne travail pas avec php , je suis sur JAVA, eclipse
0
captain-coder Messages postés 8 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 8 février 2017 1
8 févr. 2017 à 15:21
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