Borne interactive sous Wordpress - Affichage PDF

**frangass** · 26/04/2022, 14h51

Bonjour,
J'ai un serveur Wamp en local avec une installation WP.
Je souhaiterais trouver une solution pour rendre ce site interactif (proposer du contenu au public), essentiellement des pdf qui pourraient être affichés sous forme de grille.
Voici un exemple sur un site tiers:

https://pspdfkit.com/pdf-sdk/web/pdf-generation/

Allez sous "More sample documents" (voir image jointe).

Question subsidiaire: quel est le module utilisé pour ce site d'exemple?

Je souhaiterais dans l'idéal trouver quelque chose de gratuit qui me permet d'afficher plusieurs PDF sur une page et qui permet à l'utilisateur de naviguer d'un PDF à l'autre.
Il s'agit de reproduire une sorte de pilier public d'une collectivité (cette image mais en digital).

Si vous avez une autre idée que de passer par un site wordpress, mais quelque chose de simple et gratuit ferait l'affaire.
Dans l'idéal je souhaiterais définir un dossier dans lequel charger les PDF à afficher et que le site serve automatiquement visionneuse mais pas diaporama (l'utilisateur doit pouvoir cliquer sur un document pour l'afficher, ressortir et en afficher un autre).

Merci pour votre aide.

**vttman** · 26/04/2022, 18h05

Bonjour,
Taper "codepen pdf" sous Goo*gle pour voir des exemples d'affichage mais les pdf s'ouvrent sans problème sur les navigateurs les plus utilisés car ils possèdent tous

normalement

un lecteur propre ...

**frangass** · 26/04/2022, 19h17

Bonjour vttman,
Vous pouvez préciser? Comment intégrer ceci à Wordpress?
Si je cherche code pen pdf je tombe sur des exemples de codes pour convertir du HTML en PDF.
Ce n'est pas tout à fait cela que je recherche..

**vttman** · 26/04/2022, 19h30

Si vous avez une autre idée que de passer par un site wordpress, mais quelque chose de simple et gratuit ferait l'affaire

C'est dans cet esprit que j'ai proposé les exemples sous codepen dont les 2-3 que j'ai ouvert partent d'un pdf et l'affiche tout simplement (pas de conversion quoi ...)
Si le codepen est satisfaisant, il suffit de copier le code html , d'appeler le css indiqué et d'appeler aussi parfois un script Javascript puis de pointer sur un document pdf en local pour tester tout ça ...
... maintenant si ça semble trop compliqué, il faut attendre la réponse d'un mordu de Wordpress qui proposera peut-être un plugin tout fait pour gérer ça ("wordpress pdf plugin")

**frangass** · 26/04/2022, 20h33

Bonsoir,
J'ai trouvé une solution avec l'API Adobe. J'ai utilisé un plugin wordpress qui permet d'injecter du code dans le body:
Le PDF s'affiche parfaitement.

Mon problème maintenant c'est de dire au code qu'il affiche en grille tous les fichiers contenus dans ce dossier par ex:

http://localhost/wordpress/wp-content/uploads/2022/04/

et non de renseigner à chaque fois le chemin complet et nom du fichier:

http://localhost/wordpress/wp-conten...22/04/Test1.pd

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
		<title>Adobe Document Services PDF Embed API Sample</title>
		<meta charset="utf-8"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
		<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"/>
		<script type="text/javascript" src="index.js"></script>
</head>
<!-- Customize page layout style according to your need and PDF file for best viewing experience -->
<body style="margin: 100px 0 100px 200px;">
		<div id="adobe-dc-view" style="width: 800px; box-shadow: 1px 1px 10px 1px #dadada;"></div>
		<script type="text/javascript" src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function()
    {
        var adobeDCView = new AdobeDC.View({clientId: "apikey", divId: "adobe-dc-view"});
        adobeDCView.previewFile(
       {
          content:   {location: {url: "http://localhost/wordpress/wp-content/uploads/2022/04/Test1.pdf"}},
          metaData: {fileName: "Bodea Brochure.pdf"}
       });
    });
 </script>
</body>
</html>

**chrtophe** · 27/04/2022, 06h48

Les adresses localhost ne fonctionnent que sur ta machine.

**frangass** · 27/04/2022, 09h15

C’est le but d’utiliser le serveur local sur ce poste.

**chrtophe** · 27/04/2022, 20h52

J'ai bien compris, mais ça ne sert à rien de nous mettre les URL, nous ne pourrons pas les consulter.
Si c'est juste pour illustrer, pas de prob.

Pour le reste, jettes un œil ici.

**frangass** · 27/04/2022, 22h01

Merci je vais tester quelques plugins et te ferai un retour. Super le site.

**frangass** · 30/04/2022, 20h58

Voilà la solution, mais payante:

https://fr.wordpress.org/plugins/google-apps-login/

Borne interactive sous Wordpress - Affichage PDF

WordPress PHP

Discussions similaires

Partager

Partager