CSS @page 不适用于更新打印 html 页面的页眉和页脚 [英] CSS @page not working for update header and footer of print html page

查看:58
本文介绍了CSS @page 不适用于更新打印 html 页面的页眉和页脚的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我尝试了以下代码.使用CSS中的打印媒体更新打印页面内页眉和页脚的代码的目的

body {counter-reset: Chapter;}div.chapter {计数器增量:章节;}@页 {保证金:10%;@top-center { 内容:章节"计数器(章节)}}

<html lang="zh-cn"><头><link rel="stylesheet" href="./style.css"/media="print"><身体><标题></标题><div id="pageHeader"><p>这是第一页上显示的标题.</p>

<div id="pageFooter"><p>这是最后一页上显示的页脚.</p>

<section class="page"><h1>简介</h1><p>边距可以设置为如上例所示,也可以为每一边单独设置,如下面的代码片段所示,其中上下边距设置为2cm,左右边距设置为 3cm:边距可以设置为如上示例所示,也可以单独设置每一边,如下面的代码片段所示,其中上下边距设置为 2cm,左右边距设置为 3cm:边距可以设置为如上示例所示,也可以单独设置每一边,如下面的代码片段所示,其中上下边距设置为 2cm,左右边距设置为 3cm:边距可以设置为如上示例所示,也可以单独设置每一边,如下面的代码片段所示,其中上下边距设置为 2cm,左右边距设置为 3cm:</p><p>边距可以设置为如上示例所示,也可以单独设置每一边,如下面的代码片段所示,其中上下边距设置为 2cm,左右边距设置为 3cm:边距可以设置为如上示例所示,也可以单独设置每一边,如下面的代码片段所示,其中上下边距设置为 2cm,左右边距设置为 3cm:边距可以设置为如上示例所示,也可以单独设置每一边,如下面的代码片段所示,其中上下边距设置为 2cm,左右边距设置为 3cm:边距可以设置为如上示例所示,也可以单独设置每一边,如下面的代码片段所示,其中上下边距设置为 2cm,左右边距设置为 3cm:</p><p>边距可以设置为如上例所示,也可以为每一边单独设置,如下面的代码片段所示,其中上下边距设置为2cm,左右边距设置设置为 3cm:边距可以设置为如上示例所示,也可以单独设置每一边,如下面的代码片段所示,其中上下边距设置为 2cm,左右边距设置为 3cm:边距可以设置为如上示例所示,也可以单独设置每一边,如下面的代码片段所示,其中上下边距设置为 2cm,左右边距设置为 3cm:边距可以设置为如上示例所示,也可以单独设置每一边,如下面的代码片段所示,其中上下边距设置为 2cm,左右边距设置为 3cm:</p></节></html>

以下 URL 是我尝试代码的地方

但是当我打印其他@rules 时,除了@page(设置边距正确)外都不起作用

我想使用下面的 css @rule 更新打印页面中突出显示的区域

  • @底部中心
  • @左下角
  • @bottom-right-corner

解决方案

我所有的 @page css 通过 Prince 命令工作,它使用我定义的 css 为我创建 pdf

这意味着我们必须使用 @media print 来定义打印 css

关于打印页面中我的问题中突出显示的页眉和页脚它们不是通过 @page 控制的,@page 将创建带有所有定义 css 的 pdf

我们不仅有王子工具,还有很多其他工具可以通过命令行或 gui 将 html 转换为 pdf,命令如

prince path/to/book.html --style path/to/book.css --output book.pdf

它为我创建的 pdf

I tried following code. The purpose of code to update header and footer inside printed page using print media in CSS

body {counter-reset: chapter;}
div.chapter {counter-increment: chapter;}
@page {
  margin: 10%;
  @top-center { content: "Chapter" counter(chapter) }
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css"/ media="print">
</head>
<body>
<header></header>
<div id="pageHeader">
    <p>This is the Header shown on first page.</p>
</div>
<div id="pageFooter">
    <p>This is the footer shown on last page.</p>
</div>
<section class="page"> 

<h1>Introduction</h1>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>

<p>
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:

</p>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>


 </section>


 </body>
</html>

This following URL are the places from I tried code https://www.quackit.com/css/at-rules/css_bottom-center_at-rule.cfm https://www.w3.org/TR/css-page-3/#cascading-and-page-context

But When I print it apply margin from @page rule, but does not update content in header and footer from other define rules. I attached following picture it is showing what rules are using for change specific area of code

But When I print other @rules not work except @page( set margin correct)

I want to update highlighted area in printed page using below css @rule

  • @bottom-center
  • @bottom-left-corner
  • @bottom-right-corner

解决方案

my all @page css work through prince command it create pdf for me with my defined css

its mean we have to use @media print for define print css

about highlighted headers and footers in my question in print page they are not controlled through @page , @page will create pdf with all define css

We have not only prince tool, there are many others convert html to pdf through command line or gui, command like

prince path/to/book.html --style path/to/book.css --output book.pdf

The pdf it creates for me

这篇关于CSS @page 不适用于更新打印 html 页面的页眉和页脚的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆