Passer à la page suivante dans un PDFviever

**pfeuh** · 02/05/2024, 20h02

Hello,

N'y comprenant pas grand chose, je me suis fait aider par Chatty pour arriver au code suivant. Apparemment, un iframe peut faire office de PDF viewer. La méthode permettant d'aller à la page suivante existe, puisque quand l'iframe a le focus, un appui sur la touche Tab va à la page suivante. Quelqu'un aurait de la doc là dessus ou une idée du nom de la méthode?

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!-- # -*- coding: utf-8 -*- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Viewer</title>
</head>
<body>
 
<div id="btDiv"></div>
<div id="pdfDiv"></div>
 
<script>
 
function buildPdfViewer()
{
  const iframe = document.createElement('iframe');
  iframe.style.width = '650px';
  iframe.style.height = '900px';
  pdfDiv.innerHTML = '';
  pdfDiv.appendChild(iframe);
  return iframe;
}
 
function displayPdf(fname)
{
    pdfViewer.src = fname;
}
 
function createButton(function_name, param1, param2, label)
{
    var button = document.createElement("button");
    button.textContent = label;
    button.addEventListener("click", function() {function_name(param1, param2);});
    btDiv.appendChild(button);
}
 
function goToNextPage()
{
    console.log("go to next page");
    // pdfViewer.somethingLikeGoToNextPage();
}
 
function goToPreviousPage()
{
    console.log("go to previous page");
    // pdfViewer.somethingLikeGoToPreviousPage();
}
 
var pdfDiv = document.getElementById('pdfDiv');
var btContainer = document.getElementById('btDiv');
var pdfViewer = buildPdfViewer();
 
displayPdf('../../home/jazz/score/book_DO.pdf')
 
createButton(displayPdf, '../../home/jazz/score/book_DO.pdf', null, 'book_DO');
createButton(displayPdf, '../../home/jazz/score/book_SIb.pdf', null, 'book_SIb');
createButton(displayPdf, '../../home/jazz/score/book_MIb.pdf', null, 'book_MIb');
createButton(goToNextPage, null, null, 'Next Page');
createButton(goToPreviousPage, null, null, 'Previous Page');
 
</script>
</body>
</html>

displayPdf.htm

**SpaceFrog** · 03/05/2024, 08h57

Il faut modifier l'url de l'iframe en ajoutant un paramètre de page dans l'url:

Code :

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

myfile.pdf#page=4

**ASCIIDEFOND** · 03/05/2024, 14h02

Salut pfeuh,

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        button {
            width: 100px;
            height: 25px;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div id="btDiv">
        <button id="bouton-previous">Previous</button>
        <button id="bouton-next">Next</button>
    </div>
    <div id="pdfDiv"></div>
 
    <script>
        var numeroPage = 1,
            pdfDiv = document.getElementById('pdfDiv'),
            obJect = null,
            nomdupdf = "nom_du_Fichier.pdf",
            parametres = "&navpanes=0&zoom=80&pagemode=none";
 
            //Infos paramètres d'affichage (variable 'parametres')
            //navpanes=0/1              Affichage des vignettes sous Chrome
            //pagemode=none/thumbs      Affichage des vignettes sous Firefox 
 
        document.getElementById('bouton-previous').addEventListener('click', function () {
            if (numeroPage > 1) {
                numeroPage -= 1; //Page précédente
                buildPdfViewer(nomdupdf + '#page=' + numeroPage);
            }
        })
 
        document.getElementById('bouton-next').addEventListener('click', function () {
            if (numeroPage)
                numeroPage += 1; //Page suivante
            buildPdfViewer(nomdupdf +'#page=' + numeroPage);
        })
 
        function buildPdfViewer(file) {
            if (!obJect) { 
                obJect = document.createElement('object');
             }
            
            obJect.data = file + parametres
            obJect.style.width = '30%';
            obJect.style.height = '680px';
            pdfDiv.appendChild(obJect);
            return obJect;
        }
 
        buildPdfViewer(nomdupdf + '#page=1' + parametres); // nom du fichier avec le n° de la page comme le soulignait SpaceFrog
 
    </script>
 
</body>
 
</html>

**pfeuh** · 09/08/2024, 17h50

Hello,

Désolé pour le retard, j'ai oublié de m'abonner à mon propre sujet...

La solution de asciidefond (j'adore ce pseudo!) m'avais déjà été proposée par chatty, je n'ai pas réussi à la mettre en œuvre. Je pense que ça marche dans un cas bien particulier de navigateur, mais pas avec mon firefox sous ubuntu. Je pense que c'est pour les mêmes raisons que la solution de SpaceFrog ne marche pas non plus chez moi. Je cherche à être multiplateforme, l'idée est de donner un dossier sur clef, il suffit de cliquer index.th et l'"appli" se lance

J'ai entretemps solutionné le problème avec un script python qui transforme mes PDF multipages en PDF simple page avec un numéro de page dans le nom de fichier. Ce n'est pas le tip de l'année, mais ça marche très bien. voir https://www.developpez.net/forums/d2...nu-pfd_viewer/ Encore merci pour votre patience.

A+

Pfeuh

Passer à la page suivante dans un PDFviever

JavaScript

Discussions similaires

Partager

Partager