Borne interactive sous Wordpress - Affichage PDF

Version imprimable

26/04/2022, 14h51
frangass

2 pièce(s) jointe(s)

Borne interactive sous Wordpress - Affichage PDF

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.
26/04/2022, 18h05
vttman

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 :roll: normalement 8O un lecteur propre ...
26/04/2022, 19h17
frangass

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..
26/04/2022, 19h30
vttman

Citation:

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")

Solution partielle

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:

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>

27/04/2022, 06h48
Christophe

Les adresses localhost ne fonctionnent que sur ta machine.
27/04/2022, 09h15
frangass

C’est le but d’utiliser le serveur local sur ce poste.
27/04/2022, 20h52
Christophe

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.
27/04/2022, 22h01
frangass

Merci je vais tester quelques plugins et te ferai un retour. Super le site.
30/04/2022, 20h58
frangass

Solution

Voilà la solution, mais payante:

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