Imprimer un en-tête pour chaque page dans Google Chrome

Je crée un programme TV et ne devrait pas avoir de problèmes d'impression pour au moins un navigateur standard. J'ai besoin de mettre des en-têtes de logo et de titre plus sur chaque page, après des jours d'essai et de recherche, j'ai découvert que Chrome n'imprimera pas les en-têtes et les éléments position: fixed sur chaque page à cause de known bug.Imprimer un en-tête pour chaque page dans Google Chrome

En raison des fonctionnalités telles que l'impression des couleurs de fond avec -webkit-print-color-adjust: exact que j'ai beaucoup utilisé et changer les bordures de page avec la propriété CSS @page, j'ai personnalisé mon avis d'utiliser Google Chrome, mais maintenant que je vois ne peux pas imprimer les en-têtes Je cherche une alternative qui sont:

pour oublier Chrome et commencer à créer vue d'impression pour un autre navigateur qui doit faire quelques réglages pour imprimer des couleurs d'arrière-plan et les marges de page de changement (je crains que ce n'est pas possible).
Pour trouver une solution CSS/JS permettant à Google Chrome d'imprimer les en-têtes des tableaux sur chaque page.

TL; DR: Connaissez-vous un jQuery/JavaScript/etc. code pour imprimer les en-têtes de tableau sur chaque page dans Chrome?

Source

2013-02-23 Farid Rn

Oui, c'est un truc de Webkit/Chrome. Il n'imprimera pas le sujet sur chaque page. FF par exemple fait. Ce que vous pouvez faire pour réaliser quelque chose comme ceci est d'utiliser page-break. Le saut de page ne fonctionne que sur les éléments de bloc, vous devez donc les modeler en conséquence.

Comme ceci:

tr{ 
    display:block; 
}

Maintenant, vous devriez commencer à copier votre thead et le mettre dans à chaque ligne Xème avec javascript:

var head = $('table thead tr'); 
$("tbody tr:nth-child(10n+10)").after(head.clone());

Sur l'écran, vous ne voulez pas tous les têtes. Retirez-les avec une requête de médias ce (pour plus de commodité, j'ai ajouté une classe .head sur ma th> ligne tr .:

@media screen { 
    tbody .head{ 
     display: none; 
    } 
}

maintenant avant chaque .HEAD faire le saut de page:

tbody tr.head { 
    page-break-before: always; 
    page-break-inside: avoid; 
}

Check it Gardez à l'esprit que jsfiddle ne vous permet pas d'ouvrir uniquement le cadre de prévisualisation, l'impression ne fonctionne donc pas, combinez tout dans votre propre fichier et vous verrez les tableaux se séparer, le style n'est pas parfait , et ce n'est pas aussi flexible que votre navigateur lui-même décider où partager, mais bon, c'est quelque chose

Source

2013-10-03 22:25:37 Jaap

Merci pour votre réponse. Il y a longtemps que j'ai fait face à ce problème et je l'ai fait en n'utilisant pas Chrome. : D De toute façon, votre réponse semble prometteuse et je vais essayer dès que possible. Merci encore. –

Cela semble fonctionner, mais cela signifie que vous devez être quelque peu prudent lorsque vous placez des sauts de page. Deviner toutes les variables impliquées dans la hauteur verticale des éléments HTML arbitraires lors de l'impression est impossible. Mais si le contenu est de taille très uniforme, vous pouvez le faire fonctionner correctement. – Simon

Cela devrait être un commentaire, mais je n'ai pas le représentant. Quoi qu'il en soit, j'ai posted a solution here qui résout ce problème et ne vous oblige pas à essayer de préempter les sauts de page naturels avec des sauts de page forcés (une technique qui est intrinsèquement peu fiable et a tendance à gaspiller du papier).

Source

2014-09-09 18:57:46 DoctorDestructo

Merci pour votre réponse, je vais essayer dès que possible. –

Cette solution ne fonctionnera pas exactement pour les en-têtes de table, mais elle autorisera les en-têtes de code html arbitraire.J'ai créé une bibliothèque qui permet Chrome pour imprimer en-têtes et pieds de page, voir cette réponse:

https://stackoverflow.com/a/34444930/2196424

Source

2015-12-23 23:07:00 lastmjs

Imprimer un en-tête pour chaque page dans Google Chrome

Répondre

Questions connexes