Discussion :

[pc75]

Bonjour,

Avec un window.open, j'affiche des données issues d'une BDD avec de la mise en forme (Images, couleurs de fond, ...).
Les utilisateurs souhaitent imprimer cette page, mais à l'impression, c'est la cata. Par exemple, les div avec une couleur de fond cachent une partie du texte.
J'ai donc pensé à une solution "texte brut", mais c'est un peu lourd. Il faut enregistrer en txt, puis l'ouvrir pour pouvoir l'imprimer.
Je voudrais aussi éviter de créer une page sans mise en forme spécialement pour ça.

J'ai un gros doute sur la question qui m'amène, mais sait-on jamais.
Existe-t-il un "truc" qui permettrait de convertir le contenu de ma popup en texte via un lien sur cette même popup ?
C'est à dire, basculer l'affichage du format html en format correspondant au format d'un enregistrement en .txt ?

Et en question bonus (mais là je dois rêver) : et vice-versa ?

Merci.

[Kaamo]

Faire une feuille de style CSS dédiée à l'impression :

Code html :

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

<link rel="stylesheet" type="text/css" href="style_print.css" media="print" />

Incompatible IE <= 8

[Bovino]

Incompatible IE <= 8

Euh... non, l'attribut media est tout à fait compatible IE8-...

[pc75]

Merci,

Concrètement, ça s'utilise comment, svp ?

[Bovino]

• Tu cliques sur le lien Sélectionner tout au-dessus du code de Kaamo.
• Tu appuies sur la touche CTRL puis sur la touche "C" (attention, il faut que CTRL reste appyuée).
• Tu actives ton éditeur de texte.
• Tu places le pointeur au niveau des appels de feuilles de style.
• Attention, partie délicate : tu appuies sur CTRL et en laissant CTRL appuyée, tu appuies sur "V".

[Kaamo]

Oups, exact !

Je pensais à cette déclaration qui n'est pas compatible IE <= 8 :

Code css :

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

1
2
@media print {
}

Merci de la correction.

[pc75]

Re,

J'ai trouvé ce qui met le bronx à l'impression.

Mes div ont un attribut class="arrondi" qui affichent les coins arrondis.
Si j'enlève cet attribut, tout se passe bien.

Dans un css media="print", peut-on supprimer cet attribut ou le modifier ?

[Kaamo]

La feuille de style dédiée à l'impression (avec media="print"), c'est la même feuille de style qui est dédiée à l'affichage sans les fioritures de la page web.
Donc oui, retirer les coins arrondis, enlever le background, cacher les boutons et éléments de formulaires, cacher les pubs, etc etc. Bref, faire une mise en page succincte avec les éléments formatés et souhaités pour l'impression.

[pc75]

Je suis bien d'accord, mais je ne sais pas comment enlever ces coins arrondis pour l'impression.

[Kaamo]

Retirer / Commenter le code en question ??
C'est border-radius qui gère cela.

Si le code est bien fait, cela doit se trouver dans la feuille de style de la page. Du coup, la feuille de style dédiée à l'impression est un copié/collé de celle dédiée à l'affichage sur écran, sans cette propriété.
Sinon c'est défini directement dans le code HTML, et là ça sera plus long et fastidieux à mettre en place

[pc75]

C'est un code que je reprends.
Dans ma page, j'ai ça :

Code :

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
<style type="text/css">
      div {
        width: 95%;
        padding: 10px;
        background: #ccc;
        border: solid 1px black;
        margin-left:auto;
        margin-right:auto;
 
      }
      div.arrondi {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
      }
    </style>
    <!--[if lte IE 8]><script type="text/javascript" src="roundies.js"></script><![endif]-->
	<script type="text/javascript">
	DD_roundies.addRule('div.arrondi', '10px');
	</script>
.....
<div class="arrondi" style="background-color:#e7e8ed;">
.....

et le js ci-joint.

C'est cette class arrondi que je voudrait supprimer ou modifier, mais je ne sais pas où faire cela.

[Kaamo]

Pourquoi vouloir supprimer les arrondis ??
Il suffit de créer un autre CSS dédié à l'impression et il n'y aura aucun arrondi lors de l'impression. Et cela permet de conserver les arrondis sur écran

[pc75]

Merci de continuer de m'aider,

J'ai bien compris le principe, mais je ne sais pas comment coder le css pour supprimer ces arrondis à l'impression.
Je suppose que dans un css pour l'impression, on ne peut pas modifier le nom d'une classe ?

[Kaamo]

Au style CSS de ta page, tu ajoutes le type de media sur lequel l'appliquer :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css" media="screen">
div {
  width: 95%;
  padding: 10px;
  background: #ccc;
  border: solid 1px black;
  margin-left:auto;
  margin-right:auto;
}
div.arrondi {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
</style>

Tu ajoutes un style pour l'impression, en enlevant ce qui provoque l'arrondi (border-radius, comme indiqué plus haut) :

Code css :

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

1
2
3
4
5
6
7
8
9
10
<style type="text/css" media="print">
div {
  width: 95%;
  padding: 10px;
  background: #ccc;
  border: solid 1px black;
  margin-left:auto;
  margin-right:auto;
}
</style>

Pour ce qui est des scripts pour simuler l'arrondi dans les anciens navigateurs, peut être ajouter une variable à l'url de la popup qui permet de les activer ou les désactiver.

[pc75]

Re,

Merci, mais malheureusement, cela ne fonctionne pas (IE8).
Si je supprime cette ligne, j'ai bien les coins arrondis avec FF, mais pas avec IE.

<!--[if lte IE 8]><script type="text/javascript" src="roundies.js"></script><![endif]-->

Même chose si j'enlève class="arrondi" de mes div.
C'est donc le .js qui permet les coins arrondis pour IE.

La méthode que j'utilise pour avoir des coins arrondis est mauvaise ?

[Bovino]

Selon moi, oui.
Les coins arrondis, c'est juste de la cosmétique. Si l'utilisateur fait le choix d'utiliser un navigateur obsolète, alors il aura une mise en page dégradée, inutile de rajouter des rustines qui alourdissent inutilement la page !

[pc75]

Bien sur que c'est de la cosmétique, mais je n'ai pas le choix. Le cahier des charges précise "des cadres avec coins arrondis..."

[pc75]

C'est bon, j'ai résolu mon souci d'impression en utilisant curvycorners.js