Imprimer les en-têtes de page répétés dans Chrome
Quelqu'un a-t-il un lien vers un article ou un exemple pratique de répétition d'en-têtes/pieds de page de Chrome en particulier?
Contexte:
J'ai passé des jours sur ce point sans succès, plusieurs solutions Stack sont proposées, mais aucune ne semble fonctionner (sous Chrome). Depuis que nous utilisons Chrome au travail, je ne teste que là-bas. Par conséquent, beaucoup de ceux-ci disent que Chrome ne peut pas le faire, mais j'ai peut-être oublié quelque chose?
J'ai essayé ces liens Stack (..et beaucoup d'autres):
Imprimer le pied de page sur chaque page imprimée du site Web, sur tous les navigateurs (Chrome)
Est-il possible d'obtenir un en-tête/pied de page Web imprimé sur chaque page?
Création d'en-têtes et de pieds de page à l'aide de CSS pour l'impression
Si je ne peux pas, utiliser répétition en-tête/pied de page ... alors ma prochaine idée est de compter mes lignes dans mon objet clone et de le laisser se briser à un nombre maximal, créer une nouvelle page (hauteur forcée) et recommencer la boucle une autre page dans une autre div.
J'apprécie vraiment toutes les suggestions sur l'exécution de la solution en-tête/pied de page, étant donné que le but de mon application était la proposition imprimée finie.
Ok, pas de preneurs sur celui-ci, alors avec quelques jours de plus à regarder autour de moi et en choisissant de ne pas écrire ma propre solution, voici ce que j'ai trouvé.
Tout au bas d'un Stack post sans vote ni commentaire, ce petit lien solitaire était: http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243
Cette chose est géniale, elle est conçue pour gérer de larges pages de contenu et les formater en colonnes comme un journal. Il gère particulièrement bien les sauts de page et est assez flexible.
Dans mon cas, j'avais besoin d'une seule colonne (largeur de la page) et de répéter les en-têtes et les pieds de page. J'ai utilisé l'exemple 10 comme base: http://welcome.totheinter.net/autocolumn/sample10.html
J'ai simplement ajouté le lien au plug-in, modifié les ID et les classes nécessaires pour l'adapter à ma page et apporté quelques modifications mineures CSS aux hauteurs et aux largeurs. J'ai également été en mesure d'imprimer un contenu de plusieurs pages avec des en-têtes et des pieds de page récurrents dans Google Chrome! (navigateur préféré de mon entreprise)
CONSEILS:
Un petit truc en CSS, j’ai ajusté le contenu de div MIN-HEIGHT de façon à ce qu’il déplace le pied de page sur de courtes pages. (Ne le faites pas si vous voulez que l'utilisateur ait l'option portrait ou paysage). Ma copie finale est corrigée, donc c'était parfait pour moi.
J'ai testé différentes hauteurs sur le contenu pour voir comment il casse le contenu, c'était lisse à chaque fois.
J'ai essayé de poster mon dernier exemple dans JsBin et Fiddle, mais une erreur s'est produite à chaque fois.
Encore une fois, l'exemple 10 ci-dessus est un bon endroit pour commencer car il montre avant et après.
Voici ma finale avec un contenu de hauteur variable et des en-têtes et des pieds de page récurrents: (C'est la vue lorsque je clique sur le navigateur Lien d'impression/bouton dans Chrome) 
UPDATE 7/2014: Une fois encore, Chrome est le fléau de mon existence en ce qui concerne les problèmes d'impression. J'ai vu le commentaire ci-dessous sur le lien que j'ai fourni. Il a raison, le rendu est correct mais la vue d'impression est incorrecte. Désolé, mais c’est toujours un bon exemple à jouer pour apprendre les paramètres.
J'utilise toujours cette solution, CELA FONCTIONNE, mais vous devez ajuster le CSS et le JS var en fonction de la taille du contenu du corps. Les combinaisons de tailles sont TRES sensibles, mais lorsque vous réglez correctement la hauteur/largeur de la page et la taille du contenu, cela fonctionne. Je devais écrire des fonctions séparées pour les formats de papier légal/lettre. C'est limité mais cela fonctionne pour nos besoins.
J'ai également remarqué que, en fonction de la taille de la fenêtre, l'aspect final n'était pas correct, mais que le produit final IMPRIMÉ était conforme aux attentes avec les en-têtes et les pieds de page répétés. J'ai donc utilisé une fenêtre imprimable afin que l'utilisateur ne remarque pas le résultat. , mais plutôt vu le rendu d’impression chromé. Je déteste ces solutions de contournement, mais l'utilisation de Chrome par tout le monde dans mon bureau est un mal nécessaire.
Ce n'est peut-être pas une réponse directe à votre question, mais peut-être une solution directe à votre problème.
Après avoir brûlé des jours et des semaines pour résoudre ce problème, j’ai finalement renoncé à l’impression directe html/css sur les en-têtes et les pieds de page répétés. J'ai vu beaucoup de codes et d'échantillons, mais chacun d'entre eux ne répond pas exactement à mes besoins, il manque toujours ou n'imprime pas correctement.
La solution qui convient à la mine est une combinaison de html simple, de css simple et de la conversion en pdf. Vous serez surpris de voir à quel point la structure html et css sont simples.
Cette solution n’est pas entièrement à moi, mais une combinaison des codes ci-dessus et de la bibliothèque wkhtmltopdf. S'il vous plaît ne paniquez pas c'est très facile à installer, c'est ce que j'ai exactement utilisé Windows (MSVC 2013) Version 0.12.2.1, j'ai un Windows 7 bits avec xampp comme ma pile. Vous pouvez suivre ce tutoriel sur la manière de Installer wkhtmltopdf
Après l'installation, vous devriez pouvoir produire ce code
<?php
// Test correct and failed output
// Shell_exec('c:\wkhtmltopdf\bin\wkhtmltopdf --asdasdsadsad 2>> err1.txt 1>> out1.txt');
Shell_exec('c:\wkhtmltopdf\bin\wkhtmltopdf --orientation Landscape C:\xampp\htdocs\test\Template.html google.pdf');
?>
<html>
<head>
</head>
<body>
<p>Magical ponies!</p>
</body>
</html>Le contenu de Template.html que vous voyez dans php Shell_exec () est ci-dessous. Permettez-moi de vous expliquer rapidement quels sont ces paramètres:
- c:\wkhtmltopdf\bin\wkhtmltopdf - C'est ici que vous avez installé le wkhtmltopdf, l'emplacement vous appartient, mais pour le rendre accessible, j'ai utilisé le lecteur C: exactement comme dans le tutoriel.
- --orientation Landscape - Il s’agit d’un des nombreux paramètres facultatifs. Vous pouvez vous reporter à sa documentation officielle pour savoir plus de choses que vous pouvez faire avec les paramètres.
- C:\xampp\htdocs\test\Template.html - Il s’agit de l’emplacement de votre fichier html que vous souhaitez convertir. Malheureusement, je pense que vous ne pouvez pas alimenter directement une chaîne html.
- google.pdf - Nom et emplacement du fichier généré.
<!DOCTYPE html>
<html>
<head>
<style>
a{
color: black;
text-decoration: none;
}
a:hover{
cursor: inherit;
}
#main-report{
width: 100%;
}
table {
color: #333;
font-family: Helvetica, Arial, sans-serif;
width: 640px;
border-collapse: collapse;
border-spacing: 0;
}
td, th {
border: 1px solid transparent; /* No more visible border */
height: 30px;
font-size: 11px;
}
th {
background: #DFDFDF; /* Darken header a bit */
font-weight: bold;
}
td {
background: #FAFAFA;
text-align: center;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td { background: #F1F1F1; }
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td { background: #FEFEFE; }
table, tr, td, th, tbody, thead, tfoot {
page-break-inside: avoid !important;
}
</style>
</head>
<body>
<table id="main-report">
<thead>
<tr>
<th colspan="9">Inventory</th>
<th colspan="8">Inspection Report</th>
</tr>
<tr>
<th rowspan="2">Description</th>
<th rowspan="2">Serial No.</th>
<th rowspan="2">Qty</th>
<th rowspan="2">Unit Cost</th>
<th rowspan="2">Total Cost</th>
<th rowspan="2">Property No.</th>
<th rowspan="2">Date Acquired</th>
<th rowspan="2">Years in Service</th>
<th rowspan="2">Accumulated Depreciation</th>
<th colspan="5">Disposition</th>
<th rowspan="2">Appraisal 14</th>
<th rowspan="2">OR No.</th>
<th rowspan="2">Amount</th>
</tr>
<tr>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000001</td>
<td>11/03/2000</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000002</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000003</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>SN00001</td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000004</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000005</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000006</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>faksdjfh skdjh h lsdjl ksd <br/> asdfjdhsfljshdfjksahdf <br/> jsdhfjsadhfjsahfkjsdhkjh</td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000007</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000008</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000009</td>
<td>11/03/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000010</td>
<td>11/04/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>60,000.00</td><!-- UNIT COST -->
<td>60,000.00</td><!-- TOTAL COST-->
<td>000011</td>
<td>11/04/2015</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
</script>
</body></html>[1]:
La réponse à cette question dépend de la structure de votre document. S'il peut être structuré comme une série de sections courtes et incassables, vous avez de la chance! Il existe un moyen compatible avec Chrome de simuler les en-têtes de page actifs dans ce type de document (en fait, cela fonctionne dans tous les navigateurs de bureau courants).
L'idée de base est de placer une copie de l'en-tête en haut de chaque section incassable, puis d'utiliser une marge négative pour masquer la copie afin qu'elle ne soit visible que si un saut de page déplace la section à la page suivante. C'est toutefois un peu trop simpliste. Je vous recommande donc d'étudier le code ci-dessous avant de l'essayer sur vos propres documents.
Test doc:
<!DOCTYPE html>
<html>
<head>
<style>
.section {
display: table;
width: 100%;
}
.section > div {
display: table-cell;
overflow: hidden;
}
.section ~ .section > div:before {
content: "";
display: block;
margin-bottom: -2.5em; /* inverse of header height */
}
.section > div > div {
page-break-inside: avoid;
display: inline-block;
width: 100%;
vertical-align: top;
}
.header {
height: 2.5em; /* header must have a fixed height */
}
.content { /* this rule set just adds space between sections and is not required */
margin-bottom: 1.25em;
}
</style>
</head>
<body>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
Unbreakable section.<br/>Unbreakable section.
</div>
</div>
</div>
</div>
</body>
</html>
Vous ne voudriez pas utiliser cette technique dans les documents comportant des blocs de texte supérieurs à environ 1/3 de page, mais cela fonctionne parfaitement pour les documents composés de petites sections distinctes, telles que des formulaires et des tableaux.
Ma réponse à cet autre article pourrait également être d’intérêt. Il montre comment créer des en-têtes de tableau répétés compatibles Chrome, en utilisant les mêmes principes de base, mais tout le balisage supplémentaire est ajouté via javascript afin de ne pas "polluer" le document HTML d'origine.
J'utilise printThis pour résoudre le problème. Vous devez spécifier l'id de la zone d'impression ou le nom de la classe.