その他の PDF エクスポート設定
Puppeteer の PDF 生成における @page ルールに関する注意事項
ブラウザーのレンダリング標準が強化されたため、特定の @page プロパティは異なる外観にレンダリングされる場合があります。最新のブラウザーとの互換性を確保するには、既存の CSS の調整が必要になる可能性があります。PDF 生成時の最良の結果と互換性については、以下のガイドで、サポートされているプロパティとベストプラクティスをご確認ください。
サポートされていない @page プロパティと代替手段
1. @page :first
課題: 最初のページをターゲットとする :first 疑似クラスは、Puppeteer ではサポートされません。
解決策: 代わりに body:first-of-type を使用して、最初のページのコンテンツをターゲットにします。
次のコードを
1
2
3
@page :first {
/* your css here */
}
次のコードで置換
1
2
3
4
5
@media print {
body:first-of-type {
/* your css here */
}
}
2. @page の背景画像
課題: @page ルールに直接適用される背景画像はレンダリングされません。
解決策: position: fixed を使用して、背景画像を body または特定のコンテナーに適用します。
次のコードを
1
2
3
4
5
@page {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
次のコードで置換
1
2
3
4
5
6
7
@media print {
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
}
変更の理由
Puppeteer は Chromium のレンダリング エンジンを使用しています。このレンダリング エンジンは、@page のような旧式または印刷固有の CSS ルールよりも、最新の画面ベースの CSS 標準を優先します。@media print を最新の CSS で使用することで、ブラウザと Puppeteer 間の互換性を確保し、一貫性のある PDF レンダリングを実現できます。
代替手段の要約テーブル
サポート対象外 | 置換後 |
---|---|
@page :first | body:first-of-type |
@page の背景 | 背景を body に適用 |
カスタム CSS での画像とフォントの使用
Confluence エクスポートのカスタム CSS で画像やフォントを使用する場合は、次の手順に従ってアクセスできるようにしてください。
アセットをアップロードする:
自分のスペース内の Confluence ページに移動します。整理しやすくするために、"アセット" のような名前を付けた専用ページを作成します。
このページに画像やフォント ファイルをアップロードします。
アセット リンクを取得する:
アセットがアップロードされたら、ページの [その他のアクション] メニュー (3 つの点) をクリックします。
ドロップダウン メニューから [添付ファイル] を選択します。
添付ファイルのリスト内で、アップロードしたファイルを見つけます。
そのファイル名を右クリックし、[リンク先のアドレスをコピー] を選択します。
CSS でリンクを使用する:
コピーしたリンクを画像やフォントが必要な CSS ファイルに貼り付けます。次に例を示します。
1 2 3 4 5 6 7 8 9 10 11
@font-face { font-family: 'CustomFont'; src: url('https://your-confluence-instance.atlassian.net/wiki/download/attachments/SPACE_ID/filename.ttf'); } body, h1, h2, h3, h4, h5, h6, p, a, li, span, div { font-family: 'CustomFont' !important; } body { background-image: url('https://your-confluence-instance.atlassian.net/wiki/download/attachments/SPACE_ID/background.png'); }
注意: アセットが含まれているページに Confluence コンテンツの対象ユーザーがアクセスできることを確認してください。アセット ページでの権限は公開範囲に影響します。
目次のスタイルの制限事項
PDF V2 に移行するにあたり、目次 (TOC) のスタイルの実装には現在制限があることに注意してください。以前は利用できたその他の CSS プロパティは、現在のところ PDF v2 では想定どおりに機能しません。
現在サポートされている TOC プロパティ:
margin: Overall margin
margin-top: Top margin
margin-bottom: Bottom margin
margin-left: Left margin
margin-right: Right margin
size: ページ サイズ
display: 目次を無効 (none) にすべきかどうかを確認するために使用される
次のような目次のプロパティを変更する場合は、必ず次のセレクターを使用してください。
1
2
3
4
div.toc-macro {
display: none;
/*other supported properties...*/
}
現時点では、カスタム HTML を目次に追加することはできません。
CSS で見出しに番号を付ける
Confluence のエクスポートの見出しに自動的に番号を付けたい場合は、次の CSS を使用してください。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
body { counter-reset: heading1_counter; }
h1 {
counter-reset: heading2_counter;
}
h2 {
counter-reset: heading3_counter;
}
h3 {
counter-reset: heading4_counter;
}
h4 {
counter-reset: heading5_counter;
}
h1:before {
counter-increment: heading1_counter;
content: counter(heading1_counter) ". ";
}
h2:before {
counter-increment: heading2_counter;
content: counter(heading1_counter) "." counter(heading2_counter) ". ";
}
h3:before {
counter-increment: heading3_counter;
content: counter(heading1_counter) "." counter(heading2_counter) "." counter(heading3_counter) ". ";
}
h4:before {
counter-increment: heading4_counter;
content: counter(heading1_counter) "." counter(heading2_counter) "." counter(heading3_counter) "." counter(heading4_counter) ". ";
}
h5:before {
counter-increment: heading5_counter;
content: counter(heading1_counter) "." counter(heading2_counter) "." counter(heading3_counter) "." counter(heading4_counter) "." counter(heading5_counter) ". ";
}
これにより、見出しに階層形式 (1.、1.1.、1.1.1. など) で自動的に番号が付けられるため、構造と読みやすさが向上します。
PDF エクスポートでサポートされていない CSS 機能
新しい PDF エクスポート システム (PDF v2) を使用する場合、最新のブラウザーの制限により、特定の高度な CSS 機能がサポートされなくなりました。具体的には、以前は PDF のフォーマットを強化するために (目次へのページ番号の追加など) に使用されていた target-counter() や leader() などの CSS プロパティは、現在のブラウザー技術ではサポートされていません。
コンテンツへの影響
カスタム CSS に次のようなルールが含まれている場合:
1
2
3
div.toc a::after {
content: leader('.') target-counter(attr(href), page);
}
これらのルールは、新しい PDF エクスポート システムでは機能しません。その結果、目次の自動ページ番号付けや、見出しとページ番号をつなぐリーダー (点線) などの機能は、エクスポートされた PDF には表示されません。
この内容はお役に立ちましたか?