web-dev-qa-db-de.com

Wie kann ich die Papiergröße in kopflosem Chrome --print-to-pdf ändern?

Ich verwende kopfloses Chrome, um HTML-Dokumente als PDF zu exportieren

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

Wie kann ich die Papiergröße in einem generierten PDF ändern?

Ich habe die Kontrolle über beide Chrome-Parameter und HTML.

Ich bekomme immer US Letter.

Hierfür gibt es keine dokumentierten Befehlszeilenoptionen.

Ich habe versucht, CSS einzustellen: @page {size: A4;}. Kein Effekt im Headless-Modus, funktioniert aber, wenn ich drücke Ctrl+P im normalen Modus (Option zur Auswahl des Papierformats für Save as pdf verschwindet, exportiertes PDF hat A4-Seitengröße).

Ich habe dies auf Chrome-Versionen 59, 60 und 61 auf Ubuntu 16.04 versucht.

cssgoogle-chromepdfprintinggoogle-chrome-headless
18
Crazy Yoghurt

Sie können headless chrome von Node ausführen Umgebung ausführen.

Dann könnten Sie zusätzliche Parameter an printToPdfFunktion übergeben, einschließlich pageWidth und pageHeight.

4
Dimitry Leonov

Anmerkung: Nachdem ich die Kommentare in der Antwort von atomrc durchgegangen war, dachte ich darüber nach, dies als Antwort hinzuzufügen, um klarer zu sein.

Sie können die Seitengröße jetzt nur ändern, wenn Sie das devtools-Protokoll verwenden.

Dies ist ein Fehler in headless Chrome . Die @page size-CSS-Regel wird im Headless-Modus nicht richtig verstanden, da dieser Benutzer sie auf dem Chrom-Bug-Tracker gut beschreibt :

Desktop Chrome unterstützt @page at-rules für Größe und Ränder und legt die Blattmaße entsprechend der Eigenschaft size fest.

Scheinbar analysiert Headless Chrome in gewissem Umfang auch @page, verhält sich jedoch anders als die Desktopversion: Wenn Sie @page {size} angeben, scheint Headless die Abmessungen des Seitenrahmens zu ändern (im Wesentlichen den Druckbereich) und nicht das Blatt, das immer in US-Letter-Größe bleibt. Das Blatt wird jedoch gedreht, wenn Sie {size: landscape} angeben.

2
Leimi

Vor einiger Zeit wurde ein Patch erstellt, der die Konfiguration der Seitengröße ermöglicht https://codereview.chromium.org/2829973002/

Es ist jetzt geschlossen und in der unstable-Version von Chrome verfügbar, sodass Sie es wie von Ihnen vorgeschlagen @page { size: A4 } verwenden können.

Ich habe es getestet, es funktioniert auf dem instabilen Build, den ich installiert habe (Google Chrome 61.0.3141.7 dev). Ich bin mir jedoch nicht sicher, wie ich prüfen kann, wann es im Stable Build verfügbar sein wird ...

2
atomrc

Die Seitengröße kann in Zoll/mm eingestellt werden. Ich habe nicht mit einer Größe in Pixel getestet. Hier sind einige CSS-Regeln, die mir geholfen haben:

@page {
  margin: 0;
  padding: 0;
  size: 5in 6.5in;
}

Mein genauer Fall ist das Rendern von svg-to-pdf, nicht von html. Für svg müssen Sie möglicherweise auch die Attribute width und height zum Tag <svg> Hinzufügen:

<svg width="5in" height="6.5in" ...>

Das ist alles! Ausgabe PDF hat keine Ränder und behält die gewünschte Größe bei - 5 "x6,5" in meinem Fall.

1
Avael Kross

Die Seitengröße kann anscheinend jetzt "fast" genau gesteuert werden, ohne die Debug-Schnittstelle zu verwenden.

Im Folgenden finden Sie eine Methode zum Erstellen eines PDF mit nahezu genauen Abmessungen des Inhalts unter Verwendung von Headless-Chrom.

<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>

Dies bereitet das PDF-Format so vor, dass es auf die Seite passt, aber es ist nicht richtig, da die Seitengröße auf einen beliebigen Wert von 100 x 100 gesetzt wurde. 

Nachdem das Dokument gerendert wurde, können Sie die Seitengröße am unteren Seitenrand korrekt einstellen:

<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>

Dieser Ansatz entfernt die Kopf-/Fußzeile und behandelt ein numerisches Problem bei der Pixelkonvertierung in PDF.

Eine Sache noch

Chrome hat derzeit einen Fehler bei der Berechnung der absoluten Höhe eines Div, wenn Sie CSS verwenden

line-height: normal;

Dadurch wird die Seitenberechnung zu kurz und es wird eine zusätzliche PDF-Seite generiert. Sie können dies beheben mit:

line-height: unset;

In Ihrem CSS. Ohne sie bekommen Sie keine genaue Höhe!

0
sdw