問題タブ [css-paged-media]

CSS Paged Media には、string-set と呼ばれる便利な関数があり、一度定義した文字列をどこでも使用できます。

HTML:

output (Antennahouse Formatter を使用してレンダリングした場合):
警告: これは警告テキストです。

string-set が廃止されたため、これをブラウザで動作させることはできません。そこで、ブラウザで「string-set」機能を置き換える方法を探しています。

明らかなものは変数です：

しかし、それはうまくいかないようです。変数に文字列を入力できます。

しかし、属性値を読み取ろうとすると失敗し、変数は空のままです。

CSS @page マージンの使用を固定位置のヘッダーとフッターと組み合わせようとしています。

これまでの問題は、@page マージンが固定位置要素をそれらのマージンを超えて表示できないことです。

以下の例: 8.5 x 11 の印刷ページを埋めるために、50 のランダムなサイズの lorem ipsum テキストの段落を生成する Webページ。

目標@page: ヘッダーとフッターが、すべての印刷ページで定義された余白の外側に表示されるようにすること。

問題: @page マージンの外側に配置されたヘッダーとフッターが切り取られるか、消えます。

注: このページは、Google Chrome 上の MacOS との互換性のために設計されています。ヘッダー/フッターの問題は、画面ではなく、印刷されたメディアにのみ適用されます。

XSLT と CSS を使用して XML レポートを PDF に変換しようとしています。この PDF には、フッターに特定のページ番号を含め、たとえば特定の表の後に改ページを含める必要があります。

私が見つけたものから、これは「ページ化されたメディア」のCSS3「at-attributes」を使用して実現できます（例：@page）。ただし、正しく理解していれば、これらの属性を解釈して PDF を作成するツールを見つけるのに問題があるかもしれません (最初に XML から変換する必要があることは言うまでもありません)。

paged.jsスクリプトを使用してブラウザーで動作させることができることがわかりましたがlive-server、すべての Web ブラウザーでローカル ファイルの制限があるため、ローカル サーバー (例: ) を実行している場合にのみ機能します。コマンドラインスイッチを使用してこれを（一種の）克服できますが、レンダリングが完了する前にドキュメントを印刷します（ブラウザがスクリプト--allow-file-access-from-filesの終了を待たないように見えます）。paged.jsさまざまなスイッチを試しました: chrome.exe --headless --disable-gpu --allow-file-access-from-files --run-all-compositor-stages-before-draw --virtual-time-budget=100000 --print-to-pdf="<destination>" "<source>". おそらく、ノード エンジンのいくつかのスイッチが役立つでしょうか?

私の質問は、XSLT を使用して XML から対象のデータを抽出し、CSS を使用して適切なページ付きドキュメントとして PDF をフォーマットし、無料の商用ライセンスを持つソフトウェアを使用して、プログラムで XML ファイルを PDF に変換する方法を教えてください。私はpaged.jsそれを達成する必要がありますか？

私のファイルについて: 私の XML ファイルでは、XML から特定のデータを抽出するローカル XSL ファイルを参照しています。重複を削除し、日付順に並べ替えます。この XSL ファイルはローカル CSS ファイルを参照して、優れた書式設定と「ページング」属性を提供します。スクリプト ドキュメントのように、 XSL リファレンスもpaged.jsスクリプトおよび関連する CSS に記載されています。

weasyprint、 、 、htmldoc、html5-to-pdfとの間で試してみましたが、wkhtmltopdf成功しませんでした。

私はどんな提案にもオープンです。

編集: XSL-FO (コメントで提案されているように) を試していましたが、かなりうまく機能することを認めなければなりません。ページ コントロールは、CSS よりも読みやすいように思えます。私が今見ている唯一の問題は、追加のインストール (Apache FOP と Java ランタイム環境) が必要なことです。私のシナリオでは、.NET で FOP を使用する方がよいでしょう。

とにかく、Chrome をレンダラーとして使用した CSS ベースのソリューションについて詳しく説明することにしました。私はすでにそれでしばらく過ごしていますが、ほとんど機能しているようです。おそらく誰かがどこに問題があるかを発見し、CSS を使用したページ付きメディアの非常に優れたソリューションになるでしょう。

完全なtransform.xslファイルは次のとおりです。

私のstyle.css中では@page以下のようなルールがあります。元のファイルにはもっとありますが、ここでは重要ではありません。

また、データはReports.xml(下記参照) に保存されます。Resultこの xml ファイルには、必要な数のフィールドを入れることができます。私のファイルには 200 件の結果がありますが、わかりやすくするためにここでは切り捨てました。

また、ドキュメントに記載されているように、自分のファイルにもありinterface.cssます(「参考文献」を参照)。paged.polyfill.jstransform.xsl

Results.xmlコマンドを使用してChromeで開くと、chrome.exe --allow-file-access-from-files <file path>例外として機能します（下の画像を参照）。

Results.xmlコマンドを使用して Chrome で印刷しようとすると、chrome.exe --headless --disable-gpu --allow-file-access-from-files --run-all-compositor-stages-before-draw --virtual-time-budget=100000 --print-to-pdf=<destination> <source>予期しない結果が生成されます。数ページのみが生成され、合計ページ数 ( counter(pages)) はフッターで 0 を返します (下の画像を参照)。

だから多分誰かがそれを機能させる方法を理解するでしょう。

おそらく--js-flagsトリックを行うでしょうか？それとも、何かを追加/変更する必要がありpaged.polyfill.jsますか?

テーブルのカスタム CSS と組み合わせてPaged.jsを使用する必要があります。

Paged.js は常に私のスタイルを上書きします。すべてのプロパティに追加!importantしましたが、Paged.js はそれらを上書きします。

Pagedjsがそれを行うのを防ぐことはできますか? 私は JS のローカル コピーを使用しているので、簡単に変更できます。