Modifier l'en-tête/pied de page par défaut lors de l'impression au format PDF

J'essaie d'utiliser Google Chrome en remplacement de PhantomJS pour convertir du HTML en PDF. Jusqu'à présent, ça fonctionne bien pour moi. La question que je que je ne l'ai pas trouvé un moyen de traduire le code PhantomJS suivant:Modifier l'en-tête/pied de page par défaut lors de l'impression au format PDF

page.paperSize = { 
    footer: { 
    contents: phantom.callback(function(pageNum, numPages) { 
     return "Power by MyWebsite. Created on "+formatDate(new Date())+"<span style='float:right'>" + pageNum + "/" + numPages + "</span>"; 
    }) 
    } 
}

Format date est la même fonction que en question How to format a JavaScript date

Cependant je n'ai pas trouvé un moyen de reproduire cette comportement dans Google Chrome en tête.

C'est un aperçu de mon chrome code d'interface à distance:

return new Promise(async function (resolve, reject) { 
    const url = "<MyURL here>"; 
    const [tab] = await Cdp.List() 
    const client = await Cdp({ host: '127.0.0.1', target: tab }); 
    await Promise.all([ 
     Network.enable(), 
     Page.enable() 
    ]); 

    Page.loadEventFired(function() { 
     setTimeout(function() { 
      resolve(Page.printToPDF({displayHeaderFooter:true}))); //https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF 
     }, 3000); 
    }); 
    await Page.navigate({ url }); 
};

Je reçois le PDF très bien mais ne peut obtenir les en-têtes par défaut Chrome et pieds de page. Un moyen de les modifier? Je constate que je peux utiliser JavaScript dans ma page pour ajouter des éléments au bas de chaque page, mais je préférerais modifier le pied de page qui est ajouté par le navigateur lors de l'exportation/l'impression comme 'I' J'ai trouvé qu'il est beaucoup plus fiable de se positionner correctement et sans provoquer d'étranges réécoulements d'autres divs dans la page.

Source

2017-06-15 apokryfos

Lorsque le chrome est en mode fenêtre, puis aussi ne prend pas en charge en-tête changeant et le contenu de bas de page, donc je pense que la méthode sans tête ne supportera pas cela aussi. Il est clair à partir du lien (https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF) dans votre code qu'il n'y a pas de tels paramètres –

avec javascript comment voulez-vous ajouter des éléments à le haut de chaque page? Je comprends que nous pouvons ajouter les éléments en haut du document, mais comment allons-nous cibler le haut de chaque page dans le PDF final? – kyriakos

@kyriakos Vous auriez besoin que chaque élément de la page soit dans son propre 'div' pour que cela soit possible. C'est une solution, mais pas une bonne solution. – apokryfos

Selon this forum, il n'y a actuellement aucun moyen de le faire dans Google Chrome. Tout ce que vous pouvez faire est d'activer ou de désactiver l'en-tête/pied de page. Ceci est indiqué par le commentaire:

Actuellement, il n'existe aucun moyen de modifier l'en-tête lors de l'impression d'un document. Vous pouvez actuellement activer ou désactiver l'en-tête et le pied de page, ce qui inclut la date, le nom de la page Web, l'URL de la page et le nombre de pages du document que vous imprimez. Vous pouvez vérifier le Chrome Web Store pour voir s'il y a des extensions tiers à portée de main du parti que vous pouvez installer sur Chrome qui peut adapter ce que vous cherchez en termes d'impression - Source

Il peut être des extensions tierces pour obtenir la fonctionnalité que vous recherchez ou, comme vous le suggérez, vous pouvez utiliser JavaScript pour ajouter les éléments que vous souhaitez imprimer.

Source

2017-06-26 07:15:19

Il y a deux solutions à votre problème

A) Pousser la tête de chrome par ne laissant aucune marge:

@page { 
    margin: 0; 
    size: auto; 
}

@media print { 
    @page { margin: 0; } 
    body { margin: 1.6cm; } 
}

B) A l'origine une solution Firefox devrait monde pour Chrome

<html moznomarginboxes mozdisallowselectionprint>

certains échantillon:

<!DOCTYPE html> 
 
<html moznomarginboxes mozdisallowselectionprint> 
 
<head> 
 
<title>Print PDF without header</title> 
 
<style> 
 
@media print { 
 
    @page { margin: 0; } 
 
    body { margin: 1.6cm; } 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<p>Some Text in Paragraph to print!</p> 
 
<a href="javascript:print()">Print</a> 
 
</body> 
 
</html>

Source

2017-06-25 17:35:03

La question ne concerne pas la suppression des en-têtes/pieds de page chromés par défaut qu'il s'agit de les personnaliser. – apokryfos

Bien Le comportement de Chrome est lorsque vous le faites sortir, l'option d'en-tête sera éliminée, c'est bizarre mais c'est vrai, essayez ceci et vous verrez la case à cocher de l'en-tête disparue –

Il est possible de créer des en-têtes et pieds de page personnalisés à l'aide des points <header> et <footer>. Je l'utilise pour générer des fichiers PDF en utilisant Chrome Headless. Je ne l'ai pas testé dans Firefox, IE etc ...

<header> 
    Custom Header 
    <img src="http://imageurl.com/image.jpg"/> 
</header> 
<div class="content">Page Content - as long as you want</div> 
<footer> 
    Footer Content 
</footer>

CSS

@page { 
    margin: 0; 
} 
@media print { 
    footer { 
    position: fixed; 
    bottom: 0; 
    } 
    header { 
    position: fixed; 
    top: 0; 
    } 
}

Le @page { margin: 0 } supprime l'en-tête et pied de page par défaut.

Espérons que cela aide.

Source

2017-09-22 15:41:09

Ceci est une mise à jour/une réponse à la question. Comme de chrome 64, il est possible à l'aide des headerTemplate et footerTemplate paramètres à printToPDF

code exemple qui devrait fonctionner:

return new Promise(async function (resolve, reject) { 
    const url = "<MyURL here>"; 
    const [tab] = await Cdp.List() 
    const client = await Cdp({ host: '127.0.0.1', target: tab }); 
    await Promise.all([ 
     Network.enable(), 
     Page.enable() 
    ]); 

    Page.loadEventFired(function() { 
     setTimeout(function() { 
    //https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF 
      resolve(Page.printToPDF({ 
        displayHeaderFooter:true, 
        footerTemplate: "<span class='pageNumber'> of <span class='totalPages'>" 
      }))); 
     }, 3000); 
    }); 
    await Page.navigate({ url }); 
};

Source

2018-03-07 08:47:00 apokryfos

Modifier l'en-tête/pied de page par défaut lors de l'impression au format PDF

Répondre

Questions connexes