[Débutant] Lancer l'impression d'une zone bien précises (svg)

**tripper.dim** · 21/08/2017, 10h14

Bonjour toutes et tous,

Dans une page HTML, je "construit" un svg (sous la balise SVG). J'aimerai savoir, s'il est possible d'imprimer uniquement cette zone (pas le reste de la page) et si oui, comment ?

style :

Code :

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

<button type="text" onclick=" impression()">Print</button>

Mais quoi mettre dans la fonction impression() ?

D'avance merci.

Belle journée et bonne continuation.

D.

**danielhagnoul** · 21/08/2017, 11h08

La seule commande disponible en JS étant window.print(), il faut cacher ce qui ne doit pas être imprimé avant d'imprimer.

Pour cela on utilise @media print { ... }, exemple :

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* code du test */
                
                stop.begin {
                        stop-color:yellow;
                }
                stop.end {
                        stop-color:green;
                }
                
                @media print {
                        main > *:not(svg) {
                                display: none;
                        }
                }
                
                /* fin code du test */
                
        </style>
	<script>
                'use strict';
                                
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        // code du test
                        
                        
                        // fin code du test
                
                }, false );
                
                window.addEventListener( "load", ev => {
                        // le DOM est construit et la page web est visible
                        // code du test
                        
                        document.querySelector( "#printSVG" ).addEventListener( "click", ev => {
                                window.print();
                        }, false );
                        
                        // fin code du test
                
                }, false );
  </script>
</head>
<body>
	<main>
 
		<div>
			<p>Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta
			vehebant per flumen, Isauri quidem alimentorum copiis adfluebant, ipsi vero
			solitarum rerum cibos iam consumendo inediae propinquantis aerumnas exitialis
			horrebant</p>
		</div>
 
		<svg>
			<linearGradient id="gradient">
				<stop class="begin" offset="0%"/>
				<stop class="end" offset="100%"/>
			</linearGradient>
			<rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
			<circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
		</svg>
 
		<div>
			<p>Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta
			vehebant per flumen, Isauri quidem alimentorum copiis adfluebant, ipsi vero
			solitarum rerum cibos iam consumendo inediae propinquantis aerumnas exitialis
			horrebant</p>
		</div>
 
		<button id="printSVG">Imprimer le Graphique</button>
 
	</main>
</body>
</html>

**tripper.dim** · 21/08/2017, 15h02

Bonjour danielhagnoul,

Un grand merci.

Si je peux en profiter un peu, ... Mon impression ce fait toujours en mode paysage, n'est-il pas possible de forcer l'orientation.

J'ai essayer d'ajouter dans le CSS :

Code :

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

1
2
3
 @page {
      size:portrait;
 };

mais sans succès.

Auriez-vous une piste d'idée ou une solution ?

D'avance merci.

Belle journée.

D.

**danielhagnoul** · 22/08/2017, 11h27

J'utilise les propriétés de l'imprimante, qui sont accessibles au travers de l'interface d'impression du navigateur.

Ci-dessous les réglages disponibles dans Chrome :

Nom : ImpressionAvecChrome.PNG
Affichages : 214
Taille : 20,4 Ko

Nom : ImpressionAvecChrome.PNG
Affichages : 214
Taille : 20,4 Ko

[Débutant] Lancer l'impression d'une zone bien précises (svg)

JavaScript

Discussions similaires

Partager

Partager