Passer à la page suivante dans un PDFviever

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

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, 07h57

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, 13h02

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>

Passer à la page suivante dans un PDFviever

JavaScript

Vue hybride

Discussions similaires

Partager

Partager