[JavaScript]Imprimer une div avec les CSS

Marsh Posté le 10-01-2018 à 15:50:52

Bonjour à tous et bonne année
[:menkahoure_7]

Je cherche à imprimer une div, avec ses CSS en javascript (jQuery). J'ai à peu près ce que je veux à deux points prêts :

1) L'aperçu de la page à imprimer reste blanc. Il faut fermer l'aperçu, faire un clic droit imprimer sur le popup d'impression et là c'est bon.
2) J'aimerai re-sizer la page pour qu'elle tienne sur 1 A4.

Voici la partie HTML :

Code :

.......
<div id="print">
bla blabla
</div>
<input type="button" value="Imprimer" id="bout_print">
......

Et le JS :

Code :

$(document).ready(function () {
$('#bout_print').click(function(){
var myStyle = '<link rel="stylesheet" href="https://mywebsite.fr/styles/styles.css" />';
w=window.open(null, 'Print_Page', 'scrollbars=yes,Width=1000,Height=700');
w.document.write(myStyle + $('#print').html());
$(w).ready(function(){
w.print();
w.document.close();
});
});
});

Une idée pour résoudre ces deux points ?

Merci

Reply

Marsh Posté le 10-01-2018 à 15:50:52

Reply

Marsh Posté le 12-01-2018 à 20:05:55

1) Les couleurs de fond et les images pour l'impression est un paramètre à régler dans le navigateur, tu ne peux-donc le modifier via ta page.

2) En général c'est une option proposée par le logiciel d'impression mais tu peux toujours faire ton css avec des dimensions en cm si tu préfères. Ne pas oublier qu'il existe de faire une feuille spécifique à l'impression via la propriété "média" et son attribut "print".

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Reply

Marsh Posté le 15-01-2018 à 08:15:04

Merci pour ta réponse MaybeEijOrNot,

Pour le 1) c'est pas vraiment ça. On dirait en fait que l'aperçu avant impression ne charge pas le contenu de la page. J'ai juste deux pages blanches avec la date en en-tête et le numéro de page en bas.

Pour résumer, le script ouvre un popup avec la page à imprimer et les CSS qui vont bien. L'aperçu se lance et il est tout blanc.
Si je ferme l'aperçu, que je fais clic droit sur le popup -> imprimer, c'est bon.

Merci pour le 2), je vais faire ça.

Reply

Marsh Posté le 16-01-2018 à 18:28:25

As-tu essayé avec un autre navigateur (i.e. Edge) car j'avais un test rapidement en écrivant moi-même les quelques lignes de JS et ça fonctionnait.

Au passage, Firefox n'inclue pas d'aperçu dans sa fonctionnalité d'impression. Bien qu'on puisse quand même faire un aperçu. Ce sont deux fonctionnalités différentes et certains navigateurs comme Edge ou Chrome intègrent directement l'aperçu dans la fonctionnalité d'impression.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Reply

Marsh Posté le 17-01-2018 à 08:31:07

T'as raison, ça passe sous firefox...
Et aujourd'hui ça passe sous chrome...

J'ai rien fait depuis l'autre jour. WTF ?

Reply

[JavaScript]Imprimer une div avec les CSS

Sujets relatifs:

Leave a Replay