[JavaScript]Imprimer une div avec les CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [JavaScript]Imprimer une div avec les CSS

brutax

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

Publicité

MaybeEijOrNot

but someone at least

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.

brutax

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.

MaybeEijOrNot

but someone at least

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.

brutax

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

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

FORUM HardWare.fr

Programmation

Javascript/Node.js

[JavaScript]Imprimer une div avec les CSS

Sujets relatifs
Barre de progression dynamic javascript	[CSS] Débutant - Barre horizontale en barre verticale
use strict javascript	quel ide pour javascript
[HTML/CSS][PHP][JS][SQL] Quelques bon livres ?	CSS Menu navigation responsive et fixe
CSS Galère responsive centrage HELP !!	question en javascript
CSS: image hauteur 100% et largeur 50%, problème marge.	Javascript readOnly autofiller problem
Plus de sujets relatifs à : [JavaScript]Imprimer une div avec les CSS

Page générée en 0.041 secondes