web-dev-qa-db-fra.com

Comment changer le format de papier dans Chrome sans tête? --Print-to-pdf

J'utilise Chrome sans tête pour exporter des documents HTML en PDF

google-chrome --headless --disable-gpu --print-to-pdf='output_path' 'url'

Comment puis-je changer la taille du papier dans le pdf généré?

J'ai le contrôle sur les paramètres Chrome et HTML.

Je reçois toujours la lettre US.

Il n'y a pas d'options de ligne de commande documentées pour cela.

J'ai essayé de définir CSS: @page {size: A4;}. Aucun effet en mode sans tête, mais fonctionne lorsque je frappe Ctrl+P en mode normal (l'option permettant de choisir le format de papier pour Save as pdf disparaît, le format PDF exporté est au format A4).

J'ai essayé ceci sur les versions de Chrome 59, 60 et 61 sur Ubuntu 16.04.

cssgoogle-chromepdfprintinggoogle-chrome-headless
18
Crazy Yoghurt

Vous pouvez exécuter du chrome sans tête de Node environment.

Vous pourrez alors passer des paramètres supplémentaires à printToPdffunction dont pageWidth et pageHeight.

4
Dimitry Leonov

Note: après avoir parcouru les commentaires dans la réponse de atomrc, j'ai pensé à ajouter ceci comme réponse pour être plus clair.

Vous ne pouvez pas modifier la taille de la page pour le moment, sauf si vous utilisez le protocole devtools.

Ceci est un bug dans Chrome sans tête . La règle CSS @page size n'est pas comprise correctement en mode sans tête, cet utilisateur la décrit bien sur le gestionnaire de bogues liés au chrome :

Desktop Chrome prend en charge @page at-rules pour la taille et les marges et définira les dimensions de la feuille en fonction de la propriété size.

Headless Chrome semble également analyser @ page dans une certaine mesure, mais son comportement est différent de celui de la version de bureau: si vous spécifiez @page {taille}, headless semble modifier les dimensions de la zone de page (essentiellement la zone d'impression), et non la feuille, qui reste toujours en format US Letter. Cependant, la feuille est pivotée si vous spécifiez {size: landscape}.

2
Leimi

Un correctif créé il y a quelque temps permet la configuration du dimensionnement des pages https://codereview.chromium.org/2829973002/

Il est maintenant fermé et disponible dans la version unstable de chrome, vous pouvez donc l'utiliser comme vous l'avez suggéré @page { size: A4 }.

J'ai testé, cela fonctionne sur la version instable que j'ai installée (Google Chrome 61.0.3141.7 dev). Je ne sais pas comment vérifier quand il sera disponible dans la version stable ...

2
atomrc

Apparemment, la taille de la page peut maintenant être "presque" contrôlée avec précision sans utiliser l'interface de débogage.

Voici une méthode pour créer un PDF avec presque les dimensions exactes de son contenu à l’aide de chrome sans tête.

<head>
    <style>
      html, body {
        width:  fit-content;
        height: fit-content;
        margin:  0px;
        padding: 0px;
      }
     </style>

     <style id=page_style>
      @page { size: 100px 100px ; margin : 0px }
     </style>

</head>

Ceci prépare le fichier PDF à la page, mais ne sera pas correct car la taille de la page a été définie sur une valeur arbitraire de 100x100. 

Une fois le document rendu, utilisez ce qui suit pour définir correctement la taille de la page en bas de la page:

<script>
window.onload(fixpage);

function fixpage() {

     renderBlock = document.getElementsByTagName("html")[0];
     renderBlockInfo = window.getComputedStyle(renderBlock)

     // fix chrome page bug
     fixHeight = parseInt(renderBlockInfo.height) + 1 + "px"   

     pageCss = `@page { size: \${renderBlockInfo.width} \${fixHeight} ; margin:0;}`
     document.getElementById("page_style").innerHTML = pageCss
}
</script>

Cette approche élimine l’en-tête/pied de page et traite un problème numérique lié à la conversion de pixels en PDF.

Une dernière chose

Chrome a actuellement un bug avec le calcul de la hauteur absolue d'un div lorsque vous utilisez le CSS

line-height: normal;

Cela rendrait le calcul de la page trop court et donnerait lieu à la création d’une page pdf supplémentaire. Vous pouvez résoudre ce problème en utilisant:

line-height: unset;

Tout au long de votre CSS. Vous n'obtiendrez pas une hauteur précise sans cela!

0
sdw