Problème d'impression de fichier html contenant un saut de page

Problème d'impression de fichier html contenant un saut de page - HTML/CSS - Programmation

Marsh Posté le 16-11-2015 à 17:33:32    

Salut à tous,
 
A partir d'un logiciel professionnel de CFAO, je génère une documentation au format HTML dans le but de l'imprimer.
C'est tout simplement une suite de tableaux.
Tout marchait bien jusqu'à ce que je rajoute une commande de saut de page (page-break-after) et maintenant il manque des caractères à l'impression alors que l'aperçu avant impression est OK.
J'utilise Internet Explorer 11. Je n'ai pas de problème si j'imprime à partir de Firefox.
Dans la date, il manque le 6 de 16, le m de novembre, le 20 et 5 de 2015, le 06 et 6 de 17:06:16. Pour commentaire, il manque les m et le a......
Si vous voulez voir le résultat de l'impression, donner moi votre email.
 
Voici le code du document html généré:

Code :
  1. <html>
  2. <head>
  3. </head>
  4. <body bgcolor=white>
  5. <font face=Arial>
  6. <br><br><br><br><br>
  7. <table cellspacing=0 cellpadding=1 width=100%>
  8. <tr>
  9. <th align=right><font size=2>AF(114)</font></th>
  10. </tr>
  11. </table>
  12. <div style="page-break-after:always;"></div>
  13. <table border=1 bordercolordark=grey bordercolorlight=grey cellspacing=0 cellpadding=1 width=101%>
  14. <tr>
  15. <th colspan=11 align=center bordercolordark=grey bordercolorlight=grey>Lundi 16 Novembre 2015 17:06:16</th>
  16. </tr>
  17. </table>
  18. <table border=1 bordercolordark=white bordercolorlight=white cellspacing=0 cellpadding=1 width=101%>
  19. <thead>
  20. <tr>
  21. <td align=center width=5% bordercolordark=grey bordercolorlight=grey><acronym title="N° de programme pour machine CN"><strong>Fichier CN</strong></acronym></td>
  22. <td align=center width=37% bordercolordark=grey bordercolorlight=grey><acronym title="Commentaire du parcours"><strong>Commentaire</strong></acronym></td>
  23. <td align=Center width=8% bordercolordark=grey bordercolorlight=grey><acronym title="Surépaisseur du parcours"><strong>Surép</strong></acronym></td>
  24. <td align=Center width=3% bordercolordark=grey bordercolorlight=grey><acronym title="Tolérance du parcours"><strong>Tol</strong></acronym></td>
  25. <td align=Center width=3% bordercolordark=grey bordercolorlight=grey><img src="images\img_ToolpathCutterShape.png" width="16" border=0 title="Forme de l'outil"></td>
  26. <td align=Center width=3% bordercolordark=grey bordercolorlight=grey><img src="images\img_ToolpathCutterDiameter.png" width="16" border=0 title="Diamètre de l'outil"></td>
  27. <td align=Center width=3% bordercolordark=grey bordercolorlight=grey><img src="images\img_ToolpathToolCornerRadius.png" width="16" border=0 title="Rayon de coin de l'outil"></td>
  28. <td align=Center width=3% bordercolordark=grey bordercolorlight=grey><img src="images\img_ToolpathCutterNumber.png" width="16" border=0 title="N° d'outil"></td>
  29. <td align=center width=2% bordercolordark=grey bordercolorlight=grey><acronym title="Réference outilleur de l'outil"><strong>Ref outil</strong></acronym></td>
  30. <td align=Center width=3% bordercolordark=grey bordercolorlight=grey><acronym title="Type de corps d'outil"><strong>Corps Outil</strong></acronym></td>
  31. <td align=Center width=3% bordercolordark=grey bordercolorlight=grey><img src="images\img_toolpathcuttercylindricalheight.png" width="16" border=0 title="Longueur de la partie cylindrique"></td>
  32. <td align=Center width=18% bordercolordark=grey bordercolorlight=grey><img src="images\img_toolpathholder.png" width="16" border=0 title="Forme du porte outil"></td>
  33. <td align=Center width=3% bordercolordark=grey bordercolorlight=grey><img src="images\img_ToolpathToolMinimumLength.png" width="16" border=0 title="Longueur de l'outil"></td>
  34. <td align=Center width=13% bordercolordark=grey bordercolorlight=grey><acronym title="Temps d'usinage"><strong><font size=1>Temps</font></strong></acronym></td>
  35. </tr>
  36. </thead>
  37. <tfoot>
  38. </tfoot>
  39. <tbody>
  40. <!-- Ligne 1 Ligne machine CN<br> -->
  41. <tr><td height=22 colspan=14 align=left bordercolordark=grey bordercolorlight=grey><strong>Machine CN: <font color=red>        HEIDENHAIN 3axes avec cycle <font color=darkorange><em>(Bout d'outil)</em></font></strong></td></tr>
  42. <!-- Ligne 2 Ligne parcours<br> -->
  43. <tr height=22>
  44. <td height=22 align=center width=50 bordercolordark=grey bordercolorlight=grey><font size=1 color=blue>pqv0101.H</font></td>
  45. <td align=left bordercolordark=grey bordercolorlight=grey><font size=1> Demi Finition rainure</font></td>
  46. <td align=Center width=30 bordercolordark=grey bordercolorlight=grey><font size=1><font size=1>(M)0.05<br>(P)0.05</font></font></td>
  47. <td align=Center width=23 bordercolordark=grey bordercolorlight=grey><font size=1>0.002</font></td>
  48. <td align=Center width=10 bordercolordark=grey bordercolorlight=grey><font size=1><img src=images\img_ToolpathCutterFlat.png width=12 alt=Plate border=0 title=fraise_2T></font></td>
  49. <td align=Center width=33 bordercolordark=grey bordercolorlight=grey><font size=1>4.000</font></td>
  50. <td align=Center width=30 bordercolordark=grey bordercolorlight=grey><font size=1>0.000</font></td>
  51. <td align=Center width=21 bordercolordark=grey bordercolorlight=grey><font size=1>T__</font></td>
  52. <td align=center width=70 bordercolordark=grey bordercolorlight=grey><font size=1>G8A02040</font></td>
  53. <td align=Center width=10 bordercolordark=grey bordercolorlight=grey><font size=1><img src=images\img_ToolpathShankStraight.png width=12 alt=Droit border=0 title=Fraise_droite></font></td>
  54. <td align=Center width=23 bordercolordark=grey bordercolorlight=grey><font size=1>15.0</font></td>
  55. <td align=Center width=40 bordercolordark=grey bordercolorlight=grey><font size=1><font color=red>po<font color=black>D06-80-HSKA63</font></font></td>
  56. <td align=Center width=23 bordercolordark=grey bordercolorlight=grey><font size=1>15.0</font></td>
  57. <td align=Center width=36 bordercolordark=grey bordercolorlight=grey><font size=1>6.6min</font></td>
  58. </tr>
  59. <!-- Ligne 3 Ligne machine CN<br> -->
  60. <tr><td height=22 colspan=14 align=left bordercolordark=grey bordercolorlight=grey><strong>Machine CN: <font color=red>        HEIDENHAIN 3axes avec cycle avec prise de correction <font color=darkorange><em>(Bout d'outil)</em></font></strong></td></tr>
  61. <!-- Ligne 4 Ligne parcours<br> -->
  62. <tr height=22>
  63. <td height=22 align=center width=50 bordercolordark=grey bordercolorlight=grey><font size=1 color=blue>pqv0201.H</font></td>
  64. <td align=left bordercolordark=grey bordercolorlight=grey><font size=1> Finition contour rainure</font></td>
  65. <td align=Center width=30 bordercolordark=grey bordercolorlight=grey><font size=1><font size=1>(M)0.00<br>(P)0.00</font></font></td>
  66. <td align=Center width=23 bordercolordark=grey bordercolorlight=grey><font size=1>0.002</font></td>
  67. <td align=Center width=10 bordercolordark=grey bordercolorlight=grey><font size=1><img src=images\img_ToolpathCutterFlat.png width=12 alt=Plate border=0 title=fraise_2T></font></td>
  68. <td align=Center width=33 bordercolordark=grey bordercolorlight=grey><font size=1>4.000</font></td>
  69. <td align=Center width=30 bordercolordark=grey bordercolorlight=grey><font size=1>0.000</font></td>
  70. <td align=Center width=21 bordercolordark=grey bordercolorlight=grey><font size=1>T__</font></td>
  71. <td align=center width=70 bordercolordark=grey bordercolorlight=grey><font size=1>G8A02040</font></td>
  72. <td align=Center width=10 bordercolordark=grey bordercolorlight=grey><font size=1><img src=images\img_ToolpathShankStraight.png width=12 alt=Droit border=0 title=Fraise_droite></font></td>
  73. <td align=Center width=23 bordercolordark=grey bordercolorlight=grey><font size=1>15.0</font></td>
  74. <td align=Center width=40 bordercolordark=grey bordercolorlight=grey><font size=1><font color=red>po<font color=black>D06-80-HSKA63</font></font></td>
  75. <td align=Center width=23 bordercolordark=grey bordercolorlight=grey><font size=1>15.0</font></td>
  76. <td align=Center width=36 bordercolordark=grey bordercolorlight=grey><font size=1>1.4min</font></td>
  77. </tr>
  78. <!-- Ligne 5 Ligne parcours<br> -->
  79. <tr height=22>
  80. <td height=22 align=center width=50 bordercolordark=grey bordercolorlight=grey><font size=1 color=blue>pqv0301.H</font></td>
  81. <td align=left bordercolordark=grey bordercolorlight=grey><font size=1> Finition fond rainure</font></td>
  82. <td align=Center width=30 bordercolordark=grey bordercolorlight=grey><font size=1><font size=1>(M)0.00<br>(P)0.00</font></font></td>
  83. <td align=Center width=23 bordercolordark=grey bordercolorlight=grey><font size=1>0.002</font></td>
  84. <td align=Center width=10 bordercolordark=grey bordercolorlight=grey><font size=1><img src=images\img_ToolpathCutterFlat.png width=12 alt=Plate border=0 title=fraise_2T></font></td>
  85. <td align=Center width=33 bordercolordark=grey bordercolorlight=grey><font size=1>4.000</font></td>
  86. <td align=Center width=30 bordercolordark=grey bordercolorlight=grey><font size=1>0.000</font></td>
  87. <td align=Center width=21 bordercolordark=grey bordercolorlight=grey><font size=1>T__</font></td>
  88. <td align=center width=70 bordercolordark=grey bordercolorlight=grey><font size=1>G8A02040</font></td>
  89. <td align=Center width=10 bordercolordark=grey bordercolorlight=grey><font size=1><img src=images\img_ToolpathShankStraight.png width=12 alt=Droit border=0 title=Fraise_droite></font></td>
  90. <td align=Center width=23 bordercolordark=grey bordercolorlight=grey><font size=1>15.0</font></td>
  91. <td align=Center width=40 bordercolordark=grey bordercolorlight=grey><font size=1><font color=red>po<font color=black>D06-80-HSKA63</font></font></td>
  92. <td align=Center width=23 bordercolordark=grey bordercolorlight=grey><font size=1>15.0</font></td>
  93. <td align=Center width=36 bordercolordark=grey bordercolorlight=grey><font size=1>0.1min</font></td>
  94. </tr>
  95. </tbody>
  96. </table>
  97. </font>
  98. </body>
  99. </html>


 
Je précise que je ne suis pas un pro du html et que j'ai appris (pas forcement bien) tout seul.

Reply

Marsh Posté le 16-11-2015 à 17:33:32   

Reply

Marsh Posté le 17-11-2015 à 14:25:50    

Effectivement, ton HTML me rappelle ce qui se faisait avant les années 2000 :sweat: C'est absolument immonde... T'as entendu parler de CSS ?  
<font> est déprécié (utiliser font-* du css, ex : font-family, font-size...)
 
bordercolordark et bordercolorlight -> voir les border-* du css.
width -> le mettre dans un css
align -> voir text-align du css
 
Je t'encourage à aller sur des tutos pour le html et css comme le site alasacreation, parce que là, c'est vraiment la cata ;) Tu verras, ça te fera un code html plus léger et plus clair, donc plus facile à maintenir.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 17-11-2015 à 15:00:12    

Merci pour cette réponse.
 
Oui en effet, ce code n'est pas tout jeune et oui j'ai entendu parler de CSS mais je n'ai jamais pris le temps de l'apprendre et de l'utiliser.
Donc je n'ai jamais pris le temps de mettre à jour mon code puisqu'il marchait très bien et faisait exactement ce que je voulait.
La programmation html n'est pas mon travail principale mais j'en ai besoin pour générer de la documentation atelier, j'ai donc appris (à l'epoque  :D ) par moi même lorsqu'il y avais un peu moins de travail et je continue régulièrement à améliorer cette documentation (quand j'ai le temps).
J'ai bien vu qu'il y avait le CSS mais vu que j'ai déjà un peu de mal avec le html simple :sweat: . Et je ne sait pas par où commencer pour apprendre.
Il va falloir que je m'y mette  :jap:.
 
Par contre ça ne résout pas mon problème d'impression :??:. Je ne comprend pas pourquoi l'ajout du saut de page pose problème à l'impression sous IE11 alors que ça fonctionne sous Firefox.

Reply

Marsh Posté le 17-11-2015 à 16:03:12    

Comme indiqué : alsacreation -> http://www.alsacreations.com/tutoriels/
 
Pour info, le CSS 1.0 date d'avant 2000 :/ Et faire du html n'est pas faire de la programmation. HTML permet de structurer un document (titres, paragraphes, infos importantes...) et le CSS, de le mettre en forme (gras, italique, souligné, taille des polices...). :o
 
A noter qu'avec du html et css correctement structuré, tu n'aurais peut-être pas le pb. T'a vérifié, sinon, que ton pb ne venait pas d'un soucis de marges trop faibles qui faisaient sortir le contenu à imprimer de la zone d'impression possible de l'imprimante ?
 
Autre solution : pourquoi ne pas passer par une imprimante virtuelle qui transformerait le html en pdf et ensuite, tu imprimerais le pdf ?


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 17-11-2015 à 16:54:06    

Je viens de générer une documentation qui tient sur 3 pages. La page 1 est toujours la même quelque soit le document, je fais un saut de page pour commencer mon tableau sur la page 2.
Si j'imprime tout j'ai le problème et si je n'imprime que la page 2 et 3, il n'y a pas de problème.
 
Pour le pdf, j'y ai pensé mais ça fait des étapes supplémentaire et je veux éviter ça.

Reply

Marsh Posté le 17-11-2015 à 17:13:19    

Question bête : pourquoi mettre un div vide pour faire la séparation :??:
 
Pourquoi pas mettre style="page-break-after:always;" sur le premier tableau ?
 
Perso, j'aurais plutôt mis style="page-break-before: always;" dans le <table> qui doit être sur la 2ème page :/
 
<table border="1" bordercolordark="grey" bordercolorlight="grey" cellspacing="0" cellpadding="1" width="101%" style="page-break-before: always;>
 
Au passage, c'est normal ce width > 100% :??:


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 17-11-2015 à 17:55:26    

Pour le width > 100%, je ne sait plus pourquoi j'ai mis ça.
Petite question, c'est combien de pixel en largeur 1 feuille A4 ?
 
Bon, c'est claire qu'il faut que je revois tout et que je reparte sur de bonne base.
Pour cela il me faudrait une mise jour de mes connaissances HTML sur les tableaux pour bien structurer mon document et un apprentissage des bases du CSS pour faire une bonne mise en page de ma documentation en vue de l'imprimer sur des feuille A4 verticale.
Je voudrait aussi, si possible, que ce que je vois sur IE11 soit le même à l'impression.
 
Pourrai-tu me donner des liens de tuto simple avec exemple, expliquant chaque balise HTML de tableau et fonction CSS. Il me faudrait aussi apprendre ce qu'il faut mettre en début de fichier HTML.
Je veux être sur de faire un truc carré dans les règle de l'art.
Merci de ton aide. Je regarde aussi de mon coté sur le lien que tu m'as donné.


Message édité par sagazoil le 17-11-2015 à 17:57:37
Reply

Marsh Posté le 17-11-2015 à 21:00:23    

Je doute que le problème ce situe au niveau du code HTML. Certes, ce n'est pas très propre, mais ça n'expliquerais pas pourquoi certains caractères sont supprimés et pas d'autres.
 
Aurais-tu une photo du résultat de l'impression du code HTML que tu as posté ? Je serais curieux de voir à quoi ça ressemble, parce que ça marche chez moi™ (IE11, Win8.1). Est-ce que ça fait la même chose sur tous les postes où il y a IE11 ?

Reply

Marsh Posté le 18-11-2015 à 10:48:49    

Le lien que je t'ai donné, c'est justement des tutos sur le html et css. L'auteur du site a écrit un très bon bouquin : http://www.goetter.fr/
 
"c'est combien de pixel en largeur 1 feuille A4 ?" -> ça dépend. Pour bien comprendre, je vais te prendre l'exemple de la résolu FullHD, 1920x1080 px. Cette résolution, tu la retrouves aussi bien sur certaines tablettes 10" que sur des TV 32", 40", 50 ou 60", voire plus. T'as le même nb de pixels mais sur des tailles d'affichage différentes. Ce qui change, c'est la taille des pixels (d'où pourquoi ont dit que plus on a une grosse diagonale, plus il faut se reculer de l'écran, sinon, on voit les pixels). En impression, c'est pareil : on parle de ppp (pixel par pouce) ou dpi (dot per inches). La taille physique de ton impression va dépendre du ppp de ton document et de celle de ton imprimante. Ex : si ton imprimante imprime en 300 dpi (c'est le cas des imprimeurs pro) et que tu te pointes avec une image ayant une certaine définition (ex : 1600x1400) faite sous photoshop en 75 dpi (c'est le dpi par défaut des APN en général); à ton avis, il va se passer quoi ? Eh ben ton impression va être toute petite.
 
Donc pour savoir combien de pixels en largeur a une feuille A4, ça dépend de la résolution d'impression de ton imprimante mais aussi de la résolution du document à imprimer. Dans le cas de doc textes, vue que ce sont des polices vectorielles, une mise à l'échelle de la police sera faite. Dans le cas d'image avec des résolutions différentes de celles de l'imprimante, là, ça pourra être problématique.
 
 


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 18-11-2015 à 14:25:12    

Après essai sur 3 postes différents avec IE11, seul un poste fonctionne bien. J'ai remarqué une différence de version de IE11:
Sur le poste où ça marche: IE11 Version 11.0.9600.17633, Versions des mises à jour 11.0.16 (KB3021952).
Sur les postes où ça marche pas (imprime mal): IE11 Version 11.0.9600.17801 Versions des mises à jour 11.0.19 (KB3049563).
 
Donc je pense que ce n'est pas dus à mon code mais plutôt à la version de IE11.
Je vais essayer de désinstaller le KB3049563 pour voir.

Reply

Marsh Posté le 18-11-2015 à 14:25:12   

Reply

Marsh Posté le 18-11-2015 à 14:56:20    

Est-ce que ça serait pas lié à une différence de paramétrage des marges d'impression ?


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 18-11-2015 à 17:57:57    

J'ai enfin trouvé d'où vient le problème  :sol:  et ça ne vient pas de mon code html.  :D  
Je vous dit ou pas ??????????????????????????????????????????????
.
..
...
....
.....
......
.......
 
Tout simplement du driver de l'imprimante, il était plus récent sur le poste où l'impression se faisait bien.
C'est vraiment se casser le c.. à chercher des problèmes dans le code puis dans les paramètre IE11 et ensuite dans les patch d'IE11 pour s'apercevoir que ça vient d'un foutu driver d'imprimante.  :ouch:  
 
ça n’empêche qu'il faut que je modernise mon code avec du CSS.  :jap:  
 
Merci quand même pour votre aide. :hello:  
 
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed