Ouvrir la fenêtre d'impression pour un document pdf

Version imprimable

23/04/2024, 16h17
korntex5

Ouvrir la fenêtre d'impression pour un document pdf

Bonjour je cherche désespérément à ouvrir la fenêtre d'impression de chrome pour imprimer mon pdf, directement sans passer par la preview de chrome.

Je pense qu'une page web au chargement ouvre ce pdf directement sans faire Ctrl+P serait bon mais je n'arrive pas à le faire....:calim2:
23/04/2024, 18h52
mathieu

essayez peut-être cela :
https://developer.mozilla.org/fr/doc...API/tabs/print
23/04/2024, 20h12
korntex5

La page dit que c'est compatible que avec firefox...
24/04/2024, 16h05
xor AX AX

Avec du JS c'est possible
Bonjour,

J'ai fait cela il y a qques années.

Sur du Prestashop 1.4 puis 1.6 qui génère les bons de préparation/facture avec FPDF.php, j'ai ajouté à ce pdf une fonction JS qui lance l'impression du document à chaque ouverture.

L'inconvénient, c'est que chaque fois que tu ouvres le pdf, ça l'imprime sauf si tu l'annules.

Si cela t'intéresse, je peux essayer de retrouver le code.

Je précise bien :
- sur demande du client js, php (server side) créé un pdf avec plusieurs : bon de préparation (exemplaire vendeur)+bon de préparation (exemplaire Client)+facture (exemplaire Client)
- php (server side) y ajoute une fonction js qui imprime le pdf automatiquement
- js (client side) accepte le téléchargement
- js (client side) affiche le pdf => impression
24/04/2024, 16h51
korntex5

Tout d'abord merci de ton intérêt.

Mais je crois comprendre que cela implique d'avoir un serveur PHP non?

Oui, nécessite un serveur mais...

Oui, nécessite un serveur mais...

Tu peux ajouter une fonction js à ton pdf.

Si tes fichiers pdf n'évoluent pas ou peu (ce n'est pas du dynamique), tu peux modifier chacun d'entre eux.

Voici ce que répond l'IA Koala Berkeley
Citation:
Voici un exemple de code JavaScript qui peut être ajouté à un PDF pour qu'il imprime automatiquement lorsque le PDF est affiché :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 // Définir les paramètres d'impression var printSettings = { "printArea": "%printer%", "printBackground": true, "printPages": { "Range": "all" } }; // Ajouter les paramètres d'impression au PDF app.addEventListener("pageshow", function() { app.print(printSettings); });
Ce code utilise l'événement pageshow du PDF pour détecter lorsque le PDF est affiché et imprime automatiquement en utilisant les paramètres d'impression définis dans l'objet printSettings.

Voici les étapes à suivre pour ajouter ce code à un PDF :

En utilisant Adobe Acrobat :

Ouvrez votre PDF dans Adobe Acrobat.
Sélectionnez Fichier > Propriétés.
Dans la boîte de dialogue Propriétés, cliquez sur le bouton JavaScript.
Dans la zone de texte JavaScript, collez le code ci-dessus.
Cliquez sur OK pour enregistrer les modifications.
Enregistrez le PDF avec un nouveau nom ou remplacez le fichier original.

En utilisant d'autres logiciels de mise en page PDF :

Ouvrez votre PDF dans votre logiciel de mise en page PDF préféré.
Ajoutez un nouveau layer ou annotation au PDF.
Faites un clic droit sur le nouveau layer ou annotation et sélectionnez Propriétés.
Dans la boîte de dialogue Propriétés, cliquez sur le bouton JavaScript.
Dans la zone de texte JavaScript, collez le code ci-dessus.
Cliquez sur OK pour enregistrer les modifications.
Enregistrez le PDF avec un nouveau nom ou remplacez le fichier original.

Remarques importantes :

Ce code ne fonctionnera que si le PDF est ouvert dans un lecteur de PDF qui prend en charge le JavaScript, tel que Adobe Acrobat ou Adobe Reader.
Le code imprime automatiquement le PDF lorsque celui-ci est affiché, mais l'utilisateur peut toujours annuler l'impression.
Cette approche n'est pas recommandée pour les documents sécurisés ou sensibles, car elle permet l'impression non autorisée du document.
Le code peut ne pas fonctionner sur tous les appareils ou systèmes d'exploitation, y compris certains appareils mobiles ou des systèmes d'exploitation anciens.
Je ne sais pas quelle est la position de developpez.net (que je respecte grandement) concernant l'utilisation de l'AI dans le codage.
Si j'ai fait une faute, je présente mes excuses à l'équipe et elle peut bien entendu supprimer mon post.

J'utilise cet AI gratuite et sans inscription pour des problèmes circonstanciés. Elle peut répondre des choses erronées (code non fonctionnel) mais cela permet de gagner du temps sur un sujet précis. Quitte à reprendre QWANT si cela n'est pas adéquat ou pour affiner.

24/04/2024, 18h59
korntex5

Ce n'est pas le fonctionnement que je veux.
Mon PDF est sur mon site Web et il sera ouvert par une url sur un navigateur chrome ou autre.
J'ai fais une page html qui affiche la document qui est en lien <embed> puis j'ai tenté de faire window.print même dans un bouton, comme cela est recommandé sur plusieurs forums, mais cela ne fonctionne pas...
tout s'affiche très bien mais il faut que je fasse ctrl+P ou un clic sur l'imprimante du viewer pour imprimer.

J'ai l'impression que cela n'est plus possible comme cela dans les navigateurs...

Salut korntex5,

Peut-être un début de piste avec la conversion d'un PDF en JPEG/PNG ?

Source du projet pour convertir une page PDF en image JPEG/PNG: https://usefulangle.com/post/24/pdf-...png-with-pdfjs

Voici le code auquel j'ai ajouté une fonction pour l'impression.

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html>
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script src="pdf.js"></script>
	<style type="text/css">
                #upload-button {
                        width: 150px;
                        display: block;
                        margin: 20px auto;
                }
 
                #file-to-upload {
                        display: none;
                }
 
                #pdf-main-container {
                        width: 400px;
                        margin: 20px auto;
                }
 
                #pdf-loader {
                        display: none;
                        text-align: center;
                        color: #999999;
                        font-size: 13px;
                        line-height: 100px;
                        height: 100px;
                }
 
                #pdf-contents {
                        display: none;
                }
 
                #pdf-meta {
                        overflow: hidden;
                        margin: 0 0 20px 0;
                }
 
                #pdf-buttons {
                        float: left;
                }
 
                #page-count-container {
                        float: right;
                }
 
                #pdf-current-page {
                        display: inline;
                }
 
                #pdf-total-pages {
                        display: inline;
                }
 
                #pdf-canvas {
                        border: 1px solid rgba(0, 0, 0, 0.2);
                        box-sizing: border-box;
                }
 
                #page-loader {
                        height: 100px;
                        line-height: 100px;
                        text-align: center;
                        display: none;
                        color: #999999;
                        font-size: 13px;
                }
 
                #download-image,
                #print-image {
                        width: 150px;
                        display: block;
                        margin: 20px auto 0 auto;
                        font-size: 13px;
                        text-align: center;
                        font-size: 1.2em;
                }
        </style>
</head>
 
<body>
 
	<button id="upload-button">Select PDF</button>
	<input type="file" id="file-to-upload" accept="application/pdf" />
 
	<div id="pdf-main-container">
		<div id="pdf-loader">Loading document ...</div>
		<div id="pdf-contents">
			<div id="pdf-meta">
				<div id="pdf-buttons">
					<button id="pdf-prev">Previous</button>
					<button id="pdf-next">Next</button>
				</div>
				<div id="page-count-container">Page <div id="pdf-current-page"></div> of
					<div id="pdf-total-pages">
					</div>
				</div>
			</div>
			<canvas id="pdf-canvas" width="400"></canvas>
			<div id="page-loader">Loading page ...</div>
			<a id="download-image" href="#">Download PNG</a>
 
			<!-- Bouton ajouté pour l'impression -->
			<a id="print-image" href="#">Print PNG</a>
 
		</div>
	</div>
 
	<script>
 
                var __PDF_DOC,
                        __CURRENT_PAGE,
                        __TOTAL_PAGES,
                        __PAGE_RENDERING_IN_PROGRESS = 0,
                        __CANVAS = $('#pdf-canvas').get(0),
                        __CANVAS_CTX = __CANVAS.getContext('2d');
 
                function showPDF(pdf_url) {
                        $("#pdf-loader").show();
 
                        PDFJS.getDocument({ url: pdf_url }).then(function (pdf_doc) {
                                __PDF_DOC = pdf_doc;
                                __TOTAL_PAGES = __PDF_DOC.numPages;
 
                                // Hide the pdf loader and show pdf container in HTML
                                $("#pdf-loader").hide();
                                $("#pdf-contents").show();
                                $("#pdf-total-pages").text(__TOTAL_PAGES);
 
                                // Show the first page
                                showPage(1);
                        }).catch(function (error) {
                                // If error re-show the upload button
                                $("#pdf-loader").hide();
                                $("#upload-button").show();
 
                                alert(error.message);
                        });;
                }
 
                function showPage(page_no) {
                        __PAGE_RENDERING_IN_PROGRESS = 1;
                        __CURRENT_PAGE = page_no;
 
                        // Disable Prev & Next buttons while page is being loaded
                        $("#pdf-next, #pdf-prev").attr('disabled', 'disabled');
 
                        // While page is being rendered hide the canvas and show a loading message
                        $("#pdf-canvas").hide();
                        $("#page-loader").show();
                        $("#download-image").hide();
 
                        // Update current page in HTML
                        $("#pdf-current-page").text(page_no);
 
                        // Fetch the page
                        __PDF_DOC.getPage(page_no).then(function (page) {
                                // As the canvas is of a fixed width we need to set the scale of the viewport accordingly
                                var scale_required = __CANVAS.width / page.getViewport(1).width;
 
                                // Get viewport of the page at required scale
                                var viewport = page.getViewport(scale_required);
 
                                // Set canvas height
                                __CANVAS.height = viewport.height;
 
                                var renderContext = {
                                        canvasContext: __CANVAS_CTX,
                                        viewport: viewport
                                };
 
                                // Render the page contents in the canvas
                                page.render(renderContext).then(function () {
                                        __PAGE_RENDERING_IN_PROGRESS = 0;
 
                                        // Re-enable Prev & Next buttons
                                        $("#pdf-next, #pdf-prev").removeAttr('disabled');
 
                                        // Show the canvas and hide the page loader
                                        $("#pdf-canvas").show();
                                        $("#page-loader").hide();
                                        $("#download-image").show();
                                });
                        });
                }
 
                // Upon click this should should trigger click on the #file-to-upload file input element
                // This is better than showing the not-good-looking file input element
                $("#upload-button").on('click', function () {
                        $("#file-to-upload").trigger('click');
                });
 
                // When user chooses a PDF file
                $("#file-to-upload").on('change', function () {
                        // Validate whether PDF
                        if (['application/pdf'].indexOf($("#file-to-upload").get(0).files[0].type) == -1) {
                                alert('Error : Not a PDF');
                                return;
                        }
 
                        $("#upload-button").hide();
 
                        // Send the object url of the pdf
                        showPDF(URL.createObjectURL($("#file-to-upload").get(0).files[0]));
                });
 
                // Previous page of the PDF
                $("#pdf-prev").on('click', function () {
                        if (__CURRENT_PAGE != 1)
                                showPage(--__CURRENT_PAGE);
                });
 
                // Next page of the PDF
                $("#pdf-next").on('click', function () {
                        if (__CURRENT_PAGE != __TOTAL_PAGES)
                                showPage(++__CURRENT_PAGE);
                });
 
                // Download button
                $("#download-image").on('click', function () {
 
                        //Enregistrement de l'image
                        $(this).attr('href', __CANVAS.toDataURL()).attr('download', 'page.png');
                })
 
 
                // Fonction ajoutée pour l'impression
                $("#print-image").on('click', function () {
 
                        //Impression de l'image 
                        var dataUrl = document.getElementById('pdf-canvas').toDataURL(),
                                windowContent = '<img src="' + dataUrl + '">',
                                printWin = window.open('', '', 'width=600,height=800')
 
                        printWin.document.open()
                        printWin.document.write(windowContent)
                        printWin.document.close()
                        printWin.focus()
 
                        setTimeout(function () {
                                printWin.print()
                                printWin.close()
                        }, 1000)
                })
 
        </script>
 
</body>
 
</html>

25/04/2024, 14h21
korntex5

Cela a l'air super mais je ne m'y connais pas bien et après avoir chargé le pdf rien ne se passe...
25/04/2024, 15h02
ASCIIDEFOND

1 pièce(s) jointe(s)

Normalement tu as cela qui s'affiche dans le navigateur.

Pièce jointe 653820

ps: Ne pas oublier de télécharger puis de placer le script "pdf.js" dans le répertoire courant.
25/04/2024, 16h14
korntex5

Citation:

Envoyé par ASCIIDEFOND

ps: Ne pas oublier de télécharger puis de placer le script "pdf.js" dans le répertoire courant.

:oops: désolé j'avais pas vu je teste...
25/04/2024, 21h04
korntex5

Désolé je n'y arrive pas.
J'ai téléchargé le projet démo qui fonctionne bien et affiche bien chacune des pages d'un pdf mais dans le projet par de pdf.js seul dans le build un pdf.pjs
J'ai recopié tes fonctions ajoutées pour l'impression dans le projet démo pdf.html, là je me suis aperçu qu'il te manquait des ; mais rien y fait il doit manquer autre chose.

Tu travailles avec quel système d'exploitation ?

Pour les les points-virgules, c'est une mauvaise habitude de ma part mais leurs absences n'ont aucune incidence sur ce code.

J'ai un modifié un peu le code car la résolution de l'impression du document n'était tip-top.
Il faudra ajouter les deux fichiers scripts (pdf.js et pdf.worker*js) dans le même répertoire que le fichier html.

Fonctionne sous Firefox et Chrome.

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html>
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
	<script  src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
	<script src="pdf.js"></script>
	<script src="pdf.worker.js"></script>
	<style type="text/css">
                #upload-button {
                        width: 150px;
                        display: block;
                        margin: 20px auto;
                }
 
                #file-to-upload {
                        display: none;
                }
 
                #pdf-main-container {
                        width: auto;
                        margin: 0 auto;
                        display: table;
                }
 
                #pdf-loader {
                        display: none;
                        text-align: center;
                        color: #999999;
                        font-size: 13px;
                        line-height: 100px;
                        height: 100px;
                }
 
                #pdf-contents {
                        display: none;
                }
 
                #pdf-meta {
                        overflow: hidden;
                        margin: 0 0 20px 0;
                        width: 330px;
                        margin: 20px auto 10px;
                }
 
                #pdf-buttons {
                        float: left;
                }
 
                #page-count-container {
                        float: right;
                }
 
                #pdf-current-page {
                        display: inline;
                }
 
                #pdf-total-pages {
                        display: inline;
                }
 
                #pdf-canvas {
                        border: 4px solid rgba(44, 44, 44, 0.2);
                        box-sizing: border-box;
                        transform: scale(0.5);
                        transform-origin: top;
                        outline: black 2px solid;
                }
 
                #page-loader {
                        height: 100px;
                        line-height: 100px;
                        text-align: center;
                        display: none;
                        color: #999999;
                        font-size: 13px;
                }
 
                #download-image,
                #print-image {
                        width: 150px;
                        display: block;
                        margin: 20px auto 0 auto;
                        text-align: center;
                        font-size: 1.2em;
                        line-height: 8px;
                }
        </style>
</head>
 
<body>
 
	<button id="upload-button">Select PDF</button>
	<input type="file" id="file-to-upload" accept="application/pdf" />
 
	<div>
		<a id="download-image" href="#">Download PNG</a>
		<a id="print-image" href="#">Imprimer l'image</a>
	</div>
 
 
	<div id="pdf-main-container">
		<div id="pdf-loader">Loading document ...</div>
 
		<div id="pdf-contents">
			<div id="pdf-meta">
				<div id="pdf-buttons">
					<button id="pdf-prev">Previous</button>
					<button id="pdf-next">Next</button>
				</div>
				<div id="page-count-container">Page <div id="pdf-current-page"></div> of <div id="pdf-total-pages">
					</div>
				</div>
			</div>
			<canvas id="pdf-canvas" width="650"></canvas>
			<div id="page-loader">Loading page ...</div>
 
		</div>
	</div>
 
 
	<script>
 
                var __PDF_DOC,
                        __CURRENT_PAGE,
                        __TOTAL_PAGES,
                        __PAGE_RENDERING_IN_PROGRESS = 0,
                        __CANVAS = $('#pdf-canvas').get(0),
                        __CANVAS_CTX = __CANVAS.getContext('2d');
 
                function showPDF(pdf_url) {
                        $("#pdf-loader").show();
 
                        PDFJS.getDocument({ url: pdf_url }).then(function (pdf_doc) {
                                __PDF_DOC = pdf_doc;
                                __TOTAL_PAGES = __PDF_DOC.numPages;
 
                                // Hide the pdf loader and show pdf container in HTML
                                $("#pdf-loader").hide();
                                $("#pdf-contents").show();
                                $("#pdf-total-pages").text(__TOTAL_PAGES);
 
                                // Show the first page
                                showPage(1);
                        }).catch(function (error) {
                                // If error re-show the upload button
                                $("#pdf-loader").hide();
                                $("#upload-button").show();
 
                                alert(error.message);
                        });;
                }
 
                function showPage(page_no) {
                        __PAGE_RENDERING_IN_PROGRESS = 1;
                        __CURRENT_PAGE = page_no;
 
                        // Disable Prev & Next buttons while page is being loaded
                        $("#pdf-next, #pdf-prev").attr('disabled', 'disabled');
 
                        // While page is being rendered hide the canvas and show a loading message
                        $("#pdf-canvas").hide();
                        $("#page-loader").show();
                        $("#download-image").hide();
 
                        // Update current page in HTML
                        $("#pdf-current-page").text(page_no);
 
                        // Fetch the page
                        __PDF_DOC.getPage(page_no).then(function (page) {
                                // As the canvas is of a fixed width we need to set the scale of the viewport accordingly
                                var scale_required = __CANVAS.width / page.getViewport(1).width;
 
                                // Get viewport of the page at required scale
                                var viewport = page.getViewport(scale_required);
 
                                // Set canvas height
                                __CANVAS.height = viewport.height;
 
                                var renderContext = {
                                        canvasContext: __CANVAS_CTX,
                                        viewport: viewport
                                };
 
                                // Render the page contents in the canvas
                                page.render(renderContext).then(function () {
                                        __PAGE_RENDERING_IN_PROGRESS = 0;
 
                                        // Re-enable Prev & Next buttons
                                        $("#pdf-next, #pdf-prev").removeAttr('disabled');
 
                                        // Show the canvas and hide the page loader
                                        $("#pdf-canvas").show();
                                        $("#page-loader").hide();
                                        $("#download-image").show();
                                });
                        });
                }
 
                // Upon click this should should trigger click on the #file-to-upload file input element
                // This is better than showing the not-good-looking file input element
                $("#upload-button").on('click', function () {
                        $("#file-to-upload").trigger('click');
                });
 
                // When user chooses a PDF file
                $("#file-to-upload").on('change', function () {
                        // Validate whether PDF
                        if (['application/pdf'].indexOf($("#file-to-upload").get(0).files[0].type) == -1) {
                                alert('Error : Not a PDF');
                                return;
                        }
 
                        $("#upload-button").hide();
 
                        // Send the object url of the pdf
                        showPDF(URL.createObjectURL($("#file-to-upload").get(0).files[0]));
                });
 
                // Previous page of the PDF
                $("#pdf-prev").on('click', function () {
                        if (__CURRENT_PAGE != 1)
                                showPage(--__CURRENT_PAGE);
                });
 
                // Next page of the PDF
                $("#pdf-next").on('click', function () {
                        if (__CURRENT_PAGE != __TOTAL_PAGES)
                                showPage(++__CURRENT_PAGE);
                });
 
                // Download button
                $("#download-image").on('click', function () {
 
                        //Enregistrement de l'image
                        $(this).attr('href', __CANVAS.toDataURL()).attr('download', 'page.png');
                })
 
 
                // Fonction ajoutée pour l'impression
                $("#print-image").on('click', function () {
 
                        //Impression de l'image 
                        var dataUrl = document.getElementById('pdf-canvas').toDataURL(),
                                windowContent = '<img src="' + dataUrl + '">',
                                printWin = window.open('', '', 'width=800,height=600');
 
                        printWin.document.open();
                        printWin.document.write(windowContent);
                        printWin.document.close();
                        printWin.focus();
 
                        setTimeout(function () {
                                printWin.print();
                                printWin.close();
                        }, 1000)
                })
 
        </script>
 
</body>
 
</html>

26/04/2024, 10h39
korntex5

1)ton script est super bien
2) je ne sais toujours pas ou trouver les fichiers pdf.js et pdf.worker.js... désolé de mon manque de connaissance, j'ai pourtant cherché dans le projet.
3)Le bouton imprimer est typiquement ce que je recherche à faire mais en automatique au lancement de la page et je pourrais adapter mais pour le moment comme je n'arrive pas à charger le pdf c pas encore bon. Est-il possible que le bouton print n'ouvre pas un nouvel onglet?
26/04/2024, 11h48
ASCIIDEFOND

Citation:

Envoyé par korntex5

...2) je ne sais toujours pas ou trouver les fichiers pdf.js et pdf.worker.js...

http://usefulangle.com/downloads/24-1.zip

Citation:

Est-il possible que le bouton print n'ouvre pas un nouvel onglet?

Tu souhaiterais le lancement automatique de l'impression sans l'ouverture de la fenêtre de prévisualisation ?
26/04/2024, 16h37
korntex5

Oui mon but final est de pouvoir ouvrir la fenêtre d'impression automatiquement dès le chargement de la page.
Le top cela serait que ça ne lance pas un onglet supplémentaire. Est ce possible?

Citation:

Envoyé par korntex5

Oui mon but final est de pouvoir ouvrir la fenêtre d'impression automatiquement dès le chargement de la page.

Oui c'est possible en ajoutant une fonction qui aura le même code que l'événement click du bouton impression et qui se déclenchera automatiquement une fois la page PDF affichée.

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!DOCTYPE html>
<html>
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
	<script src="pdf.js"></script>
	<script src="pdf.worker.js"></script>
 
	<style type="text/css">
                #upload-button {
                        width: 150px;
                        display: block;
                        margin: 20px auto;
                }
 
                #file-to-upload {
                        display: none;
                }
 
                #pdf-main-container {
                        width: auto;
                        margin: 0 auto;
                        display: table;
                }
 
                #pdf-loader {
                        display: none;
                        text-align: center;
                        color: #999999;
                        font-size: 13px;
                        line-height: 100px;
                        height: 100px;
                }
 
                #pdf-contents {
                        display: none;
                }
 
                #pdf-meta {
                        overflow: hidden;
                        margin: 20px auto 10px;
                        ;
                }
 
                #pdf-buttons {
                        width: auto;
                        position: relative;
                        text-align: center;
                }
 
                #page-count-container {
                        position: inherit;
                        text-align: center;
                        margin-top: 10px;
                }
 
                #pdf-current-page {
                        display: inline;
                }
 
                #pdf-total-pages {
                        display: inline;
                }
 
                #pdf-canvas {
                        border: 4px solid rgba(44, 44, 44, 0.2);
                        box-sizing: border-box;
                        transform: scale(0.5);
                        transform-origin: top;
                        outline: black 2px solid;
                }
 
                #page-loader {
                        height: 100px;
                        line-height: 100px;
                        text-align: center;
                        display: none;
                        color: #999999;
                        font-size: 13px;
                }
 
                #download-image,
                #print-image {
 
                        display: none;
                        margin: 10px auto auto;
                        text-align: center;
                }
 
                button {
                        width: 120px;
                        height: 25px;
                }
 
                #page-num {
                        width: 50px;
                        outline: none;
                }
        </style>
</head>
 
<body>
 
	<div>
		<button id="upload-button">Select PDF</button>
		<input type="file" id="file-to-upload" accept="application/pdf" />
		<button id="download-image">Download PNG</button>
		<button id="print-image">Imprimer l'image</button>
	</div>
 
	<div id="pdf-main-container">
		<div id="pdf-loader">Loading document ...</div>
		<div id="pdf-contents">
			<div id="pdf-meta">
				<div id="pdf-buttons">
					<button id="pdf-prev">Previous</button>
					<button id="pdf-next">Next</button>
					<input id="page-num" type="number" min="1" value="1" />
				</div>
				<div id="page-count-container">Page <div id="pdf-current-page"></div> of <div id="pdf-total-pages">
					</div>
				</div>
			</div>
			<canvas id="pdf-canvas" width="650"></canvas>
			<div id="page-loader">Loading page ...</div>
		</div>
	</div>
 
	<script>
 
                var __PDF_DOC,
                        __CURRENT_PAGE,
                        __TOTAL_PAGES,
                        __PAGE_RENDERING_IN_PROGRESS = 0,
                        __CANVAS = $('#pdf-canvas').get(0),
                        __CANVAS_CTX = __CANVAS.getContext('2d');
 
 
                function lanceImpression() { //Ouvre automatiquement le gestionnaire d'impression une fois qu'une nouvelle page est affichée
                        var dataUrl = document.getElementById('pdf-canvas').toDataURL(),
                                windowContent = '<img src="' + dataUrl + '">',
                                printWin = window.open('', '', 'width=800,height=600');
 
                        printWin.document.open();
                        printWin.document.write(windowContent);
                        printWin.document.close();
                        printWin.focus();
 
                        setTimeout(function () {
                                printWin.print();
                                printWin.close();
                        }, 1000)
                }
 
 
                function showPDF(pdf_url) {
                        $("#pdf-loader").show();
 
                        PDFJS.getDocument({ url: pdf_url }).then(function (pdf_doc) {
                                __PDF_DOC = pdf_doc;
                                __TOTAL_PAGES = __PDF_DOC.numPages;
 
                                // Hide the pdf loader and show pdf container in HTML
                                $("#pdf-loader").hide();
                                $("#pdf-contents").show();
                                $("#pdf-total-pages").text(__TOTAL_PAGES);
 
                                //input type number
                                $("#page-num").val("1")
                                $("#page-num").prop("max", __TOTAL_PAGES);
 
                                // Show the first page
                                showPage(1);
                        }).catch(function (error) {
                                // If error re-show the upload button
                                $("#pdf-loader").hide();
                                $("#upload-button").show();
 
                                alert(error.message);
                        });;
                }
 
                function showPage(page_no) {
                        __PAGE_RENDERING_IN_PROGRESS = 1;
                        __CURRENT_PAGE = page_no;
 
                        // Disable Prev & Next buttons while page is being loaded
                        $("#pdf-next, #pdf-prev").attr('disabled', 'disabled');
 
                        // While page is being rendered hide the canvas and show a loading message
                        $("#pdf-canvas").hide();
                        $("#page-loader").show();
                        $("#download-image").hide();
 
                        // Update current page in HTML
                        $("#pdf-current-page").text(page_no);
 
                        // Fetch the page
                        __PDF_DOC.getPage(page_no).then(function (page) {
                                // As the canvas is of a fixed width we need to set the scale of the viewport accordingly
                                var scale_required = __CANVAS.width / page.getViewport(1).width;
 
                                // Get viewport of the page at required scale
                                var viewport = page.getViewport(scale_required);
 
                                // Set canvas height
                                __CANVAS.height = viewport.height;
 
                                var renderContext = {
                                        canvasContext: __CANVAS_CTX,
                                        viewport: viewport
                                };
 
                                // Render the page contents in the canvas
                                page.render(renderContext).then(function () {
                                        __PAGE_RENDERING_IN_PROGRESS = 0;
 
                                        // Re-enable Prev & Next buttons
                                        $("#pdf-next, #pdf-prev").removeAttr('disabled');
 
                                        // Show the canvas and hide the page loader
                                        $("#pdf-canvas").show();
                                        $("#page-loader").hide();
                                        $("#download-image").show();
 
                                        lanceImpression(); // Ici, l'appel la de fonction pour l'ouverture du gestionnaire d'impression
 
                                });
                        });
                }
 
                // Upon click this should should trigger click on the #file-to-upload file input element
                // This is better than showing the not-good-looking file input element
                $("#upload-button").on('click', function () {
                        $("#file-to-upload").trigger('click');
                });
 
                // When user chooses a PDF file
                $("#file-to-upload").on('change', function () {
                        // Validate whether PDF
                        if (['application/pdf'].indexOf($("#file-to-upload").get(0).files[0].type) == -1) {
                                alert('Error : Not a PDF');
                                return;
                        }
 
                        $("#upload-button").hide();
 
                        document.getElementById("download-image").style.display = "block";
                        document.getElementById("print-image").style.display = "block";
 
                        // Send the object url of the pdf
                        showPDF(URL.createObjectURL($("#file-to-upload").get(0).files[0]));
                });
 
                // Previous page of the PDF
                $("#pdf-prev").on('click', function () {
                        if (__CURRENT_PAGE != 1)
                                showPage(--__CURRENT_PAGE);
                        $("#page-num").val(__CURRENT_PAGE)
                });
 
                // Next page of the PDF
                $("#pdf-next").on('click', function () {
                        if (__CURRENT_PAGE != __TOTAL_PAGES)
                                showPage(++__CURRENT_PAGE);
                        $("#page-num").val(__CURRENT_PAGE)
                });
 
                //input change page
                $("#page-num").bind('keyup mouseup', function () {
                        let numpage = parseInt($(this).val());
 
                        if (numpage > __TOTAL_PAGES || $(this).val() == "") {
                                $(this).val(__CURRENT_PAGE);
                        } else {
                                __CURRENT_PAGE = numpage;
                                showPage(numpage);
                        }
                })
 
                // Download button
                $("#download-image").on('click', function () {
                        //Enregistrement de l'image
                        const downloadImage = document.createElement("a");
                        document.body.appendChild(downloadImage);
                        downloadImage.setAttribute("download", "page-" + document.getElementById("pdf-current-page").innerText + ".png");
                        downloadImage.href = __CANVAS.toDataURL();
                        downloadImage.click();
                        downloadImage.remove();
                })
 
 
                // Ouvre le gestionnaire d'impression via un click sur le bouton
                $("#print-image").on('click', function () {
                       lanceImpression() 
                })
 
        </script>
 
</body>
 
</html>

Citation:

Envoyé par korntex5

Le top cela serait que ça ne lance pas un onglet supplémentaire. Est ce possible?

Tu fais référence à la fenêtre du gestionnaire d'impression ?

30/04/2024, 09h29
korntex5

Moi en fait j'ai une application en html5 et elle fait déjà la preview et l'édition de mes fichiers mais pour l'impression je passe par un processus que je ne maitrise pas et qui plante assez régulièrement.
Donc la preview n'a que peu d'intérêt pour moi.
Le top est que puisse activer un bout de code js ou au pire ouvrir une pageweb pour imprimer.

De ce que je comprends c'est le système pdf.js n'imprime qu'une page et en tant que image. C'est pas bon pour avoir une bonne résolution les pdf non? Cela fait-il autant d'impression que de page?