6 
@page { @top-right { content: "Page " counter(page) " of " counter(pages); } }

これは、たとえば、ページ番号を「Page 5 of 10」として表示することがわかった唯一の方法です。ただし、機能していないようです。単純な HTML ページで試してみましたが、うまくいきませんでした。

プレーンなhtml/cssを使用して、ページのどこにでもページ番号を表示したい。

誰かがそれを機能させることに成功しましたか? もしそうなら、私はあなたのサポートに感謝します。

4

4 に答える 4

5

  1. HTML入力からPDFおよび印刷出力（「ページ化されたメディア」）を作成するために（概して正しい）CSSスニペットを引用しますが、「機能していないようです」と言います。

  2. 次に、さらに下の 2 つの文で、「ページの任意の場所にページ番号を表示したい」と言います。

まず、ポイント 2 です。

ページ番号を HTML Web サイト自体に挿入する方法はありません。この機能は、HTML から作成された PDF や印刷出力などのページ付きメディア専用です。

したがって、これは PDF または印刷出力専用です。しかし、それでも、PDF にページ番号を付けたり、ページを任意の位置に印刷したりする方法はありません。あなたの唯一の選択肢は、メインページのどこにもない、上下の左/右/中央のマージンボックスです。

第二に、ポイント1。

これらの可能な場所にページ番号情報を配置するために...

あなたのセットアップで何がうまくいかないのか詳しく説明していないので、概要を説明しましょう。

ファイルmy.cssを作成し、次のコンテンツをその中に入れます (これは、質問に必要な最小要件ではありませんが、実験するためのいくつかの利点を追加します)。

また、まずは PrinceXML での使い方を説明します。

@page { size: A4 landscape;
    background: gray;
    border: solid 1pt blue;
    padding: 9pt;
    margin: 18pt 18pt 18pt 18pt;
    font-family: "Helvetica Narrow";
    @top-left {
       content: 'PrivateCopy';
       color: red;
       font-style: bolditalic;
              }
    @top {
       content: string(doctitle);
         }
    @bottom-left {
       content: 'My Super-Duper Manual';
       font-style: bold;
                  }
    @top-right {
       content: "Page " counter(page) " of " counter(pages);
       font-style: bold;
                  }
    @bottom {
       content: string(paratitle);
            }
  }

ファイルをディスクのどこかに保存します。

次に、PrinceXML コマンドラインを呼び出し、-s my.cssスタイル シートを適用します。

prince                                                           \
  --verbose                                                      \
  --javascript                                                   \
  --style=/path/to/my.css                                        \
    http://stackoverflow.com/questions/12061835/css-page-counter \
  --output=my-css-page-counter-question.pdf

(明らかに、パスをmy.cssスタイルシート ファイルに適合させる必要があります。しかし、その後...) 出来上がり!、PDF での Stackoverflow の質問...

もちろん、my.cssをさらに多くの機能で拡張できます。もちろん、ローカル ファイルとリモート ファイルが混在した HTML ファイルの変換にも使用できます。

prince                                                 \
  --verbose                                            \
  --javascript                                         \
  -s /path/to/my.css                                   \
   /home/nada.adly/Documents/title.html                \
   /home/nada.adly/Documents/chapter_1.html            \
   /home/nada.adly/Documents/chapter_2.html            \
   http://en.wikipedia.org/wiki/Cascading_Style_Sheets \
   http://stackoverflow.com/questions/tagged/css       \
  -o random.pdf

今度は、PrinceXML とは別に CSS を使用し、直接印刷出力します。(もちろん、PrinceXML によって生成された PDF はいつでも印刷できますが、Prince をまったく使用したくない場合もあります)。

繰り返しますが、質問の範囲が明確ではありません。

  1. あなたはブラウザー ユーザーとして、これらのページ番号をWeb サイトの印刷物に含めたいと思いますか?

  2. それとも、Web サイトを担当する Web マスターとして、これらのページ番号が、Web サイトの訪問者がコンテンツから印刷する印刷物に確実に組み込まれるようにしたいとお考えですか?

ここでは、これら 2 つの点について詳しく説明しません (要点を完全に見逃している可能性があるため)。

  • ... 'User Style Sheets'と'print.css'をググって、この CSS コードを正確に格納する場所を見つける必要があります (ユーザー スタイル シートの場所はブラウザによって異なるため)。

  • ...CSS コードは、2 つの目的 (ウェブマスターのスタイル シートまたはユーザー スタイル シート) のいずれについても同じです。

于 2012-08-22T21:19:15.137 に答える
2

これは、HTML ページが印刷されている場合にのみ機能します。HTML ページを .xps として印刷または保存してみてください。ページ番号が表示されます。

于 2012-08-21T19:43:02.397 に答える
1

Princeを使用している場合は、すべて正常に動作し、印刷品質の PDF を作成できる最新の CSS3 標準に安全に依存できます。

プリンスを使用していない場合は、運が悪いです。回避するには複数のオプションがありますが、実際に機能するものはありません。

 @page { anything }

ページネーションに関しては、ブラウザの世界ではほとんど役に立たない. 一部のブラウザでは、ある程度の余白があれば問題ないようです。もう 1 つの問題は、"@top-right" のようなマージン ボックスの実装がないことです。私がテストしたブラウザのどれもそれらを聞いたことさえありませんでした:-) 繰り返しますが、Prince はそれらをすべて知っています。

Chromeは @page アプローチ全体を使用しておらず、chrome-print ダイアログにチェックボックスがあり、非常に粗雑なページネーション ("1/2") を埋め込むことができます。いかなる方法でも構成可能ではなく、ページ番号に関連する css を完全に無視します。

Firefoxの方がはるかに優れた候補です。少なくとも有効な回避策がありますが、ここでの問題は、カウンター (ページ) が常にゼロであることです。したがって、総ページ数を表示したい場合、このアプローチはどこにもつながりません。

ブラウザーの場合、最終的には、使用されている HTML/CSS レンダリング エンジンに行き着きます。すべてのライブラリ、スタンドアロン ソリューション、および組み込みブラウザは、基盤となるレンダラーに依存しており、機能がサポートされていないかサポートが不十分な場合、フレームワークはそれについて何もできません (awesomoium、cefsharp など)。

于 2016-04-19T22:30:10.787 に答える