Impression d’un formulaire HTML à l’aide de window.print ()

J’ai été chargé de créer un lien de formulaire HTML vers une firebase database. Ici pas de problème.

Le problème, c’est que l’utilisateur doit pouvoir imprimer ce formulaire. Donc, je construis un “bouton Imprimer” en utilisant un bouton HTML et j’insère du JQuery pour que le formulaire soit correctement window.print() supprimer certaines bordures, images d’arrière-plan, etc.) et j’utilise window.print() pour imprimer mon formulaire.

Voici le problème:

Ma forme est de 6 à 7 pages.

Mais s’attend à une impression correcte sur Google Chrome (toutes les sections sont sur des pages séparées), mais sous IE (dernière version), certains champs et certaines sections sont “coupés en deux” sur certaines pages.

Je pense que le problème est de savoir comment IE utilise les marges et les rembourrages.

J’ai également vérifié tous les parameters que je pouvais transmettre à window.print() sur Google, pensant que cela pourrait peut-être aider mais que rien ne serait trouvé.

Quelqu’un peut-il fournir un autre moyen ou une autre fonction que je pourrais utiliser pour que mon formulaire ait la même apparence sur les deux navigateurs lors de l’impression? Ou peut-être que quelqu’un pourrait pointer si j’ai commis une erreur.

Voici mon code:

HTML:

  Codes de sécurité des ascenseurs
   B44-2007  B44-2010  ASME 17.1-2007  ASME 17.1-2010   Autre:   

  Ville d'installation:   
 
  Type de contôle
  Modèle:  JHD-1000 (Avec automate)    JHD-2000 (Carte de communication Canbus)

Notes: Je ne mets qu’un échantillon de mon code. J’ai plusieurs fois cette longueur. Le

est ce que j’avais l’habitude d’essayer de placer tous les

sur une page.

CSS:

  .Border { border: black solid 2px; } .Titre { text-align:center; background-color:black; color:white; border: solid black 2px; } .Spacers { display:none; }

Remarques: Je supprime le code qui n’était pas directement nécessaire à la question. Si je supprime un élément nécessaire, merci de préciser que je vais modifier et append le code manquant.

Pour votre information: ne cherchez pas .divspacer . Il n’existe pas, il n’est utilisé que dans mon JQuery (voir ci-dessous).

JQUERY:

 function ImprimerForm() { $("#divBgd").removeClass('Border');//This remove the border $("#divValidationEnvois").css('display', 'none');//This hide all the button so they dont print $(".divspacer").removeClass('Spacers');//Make spacers visible window.print();//Print form $("#divBgd").addClass('Border');//Put everything back has it was!! $("#divValidationEnvois").css('display', 'block'); $(".divspacer").addClass('Spacers'); }

Alors juste pour être clair:

Probelm: Je ne peux pas obtenir que IE et Chrome impriment mon formulaire de la même manière. Certains champs sont coupés en deux et certains

sont sur deux pages différentes.

Vous cherchez: Un moyen de leur faire imprimer mon formulaire de la même manière sur les deux navigateurs OU une erreur commise avec la mise en page.

Ce que j’ai déjà fait: Rechercher des parameters pour window.print() ET essayer d’append des ESPACES (voir le code ci-dessus).

Merci à tous pour l’aide!

Au lieu d’essayer de cacher les divs indésirables à l’aide de jQuery, vous devriez utiliser un css spécifique à l’impression. En cachant des éléments avec jQuery, vous pourriez vous heurter à des effets secondaires indésirables. En ajoutant un css print, vous spécifiez un jeu de règles uniquement utilisé lorsque l’imprimante tente d’imprimer la page. Donc, rien n’est ajouté à vos règles CSS visibles. Dans ce CSS, vous pouvez par exemple définir certains éléments à display:none; .

Exemple d’ajout d’un css print spécifique à IE:

Vous pouvez supprimer les balises if IE / endif si vous souhaitez appliquer les règles à tous les navigateurs.

Une autre option pour créer des règles d’impression consiste à utiliser une section d’ @media print css @media print comme ceci (son utilisation de cette manière s’applique également à tous les navigateurs, ce qui n’est en fait pas une mauvaise idée):