web-dev-qa-db-ja.com

ヘッドレスで用紙サイズを変更するにはどうすればよいですかChrome --print-to-pdf

私はheadless Chromeを使用してhtmlドキュメントをpdfにエクスポートしています

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

生成されたpdfの用紙サイズを変更するにはどうすればよいですか？

Chromeパラメーターとhtmlの両方を制御できます。

私はいつもUSレターを受け取ります。

これに関する文書化されたコマンドラインオプションはありません。

CSSを設定しようとしました：@page {size: A4;}。ヘッドレスモードでは効果はありませんが、ヒットすると動作します Ctrl+P 通常モード（Save as pdfの用紙サイズを選択するオプションが消え、エクスポートされたPDFのページサイズはA4です）。

Ubuntu 16.04でChromeバージョン59、60、61でこれを試しました。

cssgoogle-chromepdfprintinggoogle-chrome-headless
19
Crazy Yoghurt

headless chrome Nodeから 環境を実行します。

次に、printToPdffunction にpageWidthとpageHeightを含む追加のパラメーターを渡すことができます。

4
Dimitry Leonov

注：atomrcの回答のコメントを読んだ後、これをより明確にするための回答として追加することを考えました。

Devtoolsプロトコルを使用しない限り、現在ページサイズを変更することはできません。

これは ヘッドレスChromeのバグ です。 @page size CSSルールは、ヘッドレスモードでは正しく理解されません。 このユーザーは、クロムバグトラッカーでよく説明しているため ：

デスクトップChromeは、サイズとマージンの@page at-rulesをサポートし、sizeプロパティに従ってシートの寸法を設定します。

Headless Chromeはある程度@pageも解析しますが、デスクトップバージョンとは異なる動作をします。@ page {size}を指定すると、headlessはページのサイズを変更するようですボックス（基本的には印刷領域）であり、常にUSレターサイズのままのシートではありませんが、{size：landscape}を指定すると、シートは回転します。

3
Leimi

ページサイズ設定を有効にするパッチが少し前に作成されました https://codereview.chromium.org/2829973002/

現在は閉じられており、Chromeの不安定版で使用できるため、提案どおりに使用できます@page { size: A4 }。

テストしましたが、インストールした不安定なビルドで動作します（Google Chrome 61.0.3141.7 dev）。しかし、安定したビルドでいつ利用可能になるかを確認する方法はわかりません...

2
atomrc

ページサイズはインチ/ mmで設定できます。ピクセル単位のサイズではテストしていません。これが私のためのトリックを行った一連のCSSルールです。

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

私の正確な場合は、htmlではなくsvg-to-pdfをレンダリングしています。 svgの場合、widthおよびheight属性を<svg>タグに追加する必要がある場合があります。

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

それで全部です！出力PDFにはマージンがありません。私の場合は5 "x6.5"のサイズを維持します。

1
Avael Kross

デバッグインターフェイスを使用せずに、ページサイズを「ほぼ」正確に制御できるようになりました。

以下は、ヘッドレスクロムを使用して、コンテンツのほぼ正確な寸法でPDFを作成する方法です。

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

これにより、ページに合わせてpdfを作成する準備が整いますが、ページサイズが100x100の任意の値に設定されているため、正しくありません。

ドキュメントがレンダリングされた後、以下を使用してページの下部にページサイズを正しく設定します。

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

このアプローチは、ヘッダー/フッターを排除し、pdfへのピクセル変換に関する数値の問題に対処します。

もう1つ

現在、Chromeには、CSSの使用時にdivの絶対高さを計算するバグがあります

line-height: normal;

これにより、ページの計算が短すぎて、余分なpdfページが生成されます。これを修正するには：

line-height: unset;

CSS全体。それなしでは正確な高さは得られません！

0
sdw