Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1009 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [JavaScript]Imprimer une div avec les CSS

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[JavaScript]Imprimer une div avec les CSS

n°2309736
brutax
Posté le 10-01-2018 à 15:50:52  profilanswer
 

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 :
  1. .......
  2. <div id="print">
  3.      bla blabla
  4. </div>
  5. <input type="button" value="Imprimer" id="bout_print">
  6. ......


 
Et le JS :

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


 
Une idée pour résoudre ces deux points ?
 
Merci :)

mood
Publicité
Posté le 10-01-2018 à 15:50:52  profilanswer
 

n°2309841
MaybeEijOr​Not
but someone at least
Posté le 12-01-2018 à 20:05:55  profilanswer
 

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.
n°2309929
brutax
Posté le 15-01-2018 à 08:15:04  profilanswer
 

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.
https://reho.st/medium/self/8bdf120227fb3635038f727fcb6037af9d29b9f8.png
 
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.

n°2310027
MaybeEijOr​Not
but someone at least
Posté le 16-01-2018 à 18:28:25  profilanswer
 

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.
n°2310048
brutax
Posté le 17-01-2018 à 08:31:07  profilanswer
 

T'as raison, ça passe sous firefox...
Et aujourd'hui ça passe sous chrome...
 
J'ai rien fait depuis l'autre jour. WTF ?


Aller à :
Ajouter une réponse
  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 javascriptquel 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


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR