css3对页面打印设置的一些特殊属性,如@page,target-counter等

news2024/12/29 10:16:28

公司内部应业务需求,需要将html生成pdf并能打印,前后台都各有方式,这里综合比较选择用java去生成,避免了前端生成带来的诸多问题,后台用的框架是 iTextPdf
但是在做的同时发现用iText实现的pdf生成和公司的业务需要生成的pdf有些差距,在这里遇到的问题是生成的目录、目录页码及点击目录超链接到对应的内容页
有三个问题需要解决

1、生成目录

这里是java循环生成的,这里没什么可记录的

2、目录页码

java同学在这里遇到的问题是没法去生成目录,可能后台插件不到位或者写法有问题,话不多说,上干货
有几个重点需要了解的css
@page,counter(page),target-counter

2.1 @PAGE 规则
@page规则允许你指定页面盒子的许多方面。例如,你想要指定页面尺寸。下面这条规则指定默认页面尺寸是5.5*8.5英尺

@page {
  size: 5.5in 8.5in;
}

除了可以用长度值声明尺寸,你还可以使用纸质尺寸关键字,例如"A4"或““legal”。

@page {
  size: A4;
}

你也可以使用关键字来指定页面方向 - ““portrait””或“landscape”。

@page {
  size: A4 landscape;
}

2.2 页面模块
在这里插入图片描述
2.2.1页面左边距和右边距
页面模块的另一方面是它定义了伪类选择器来选择文档的偶数或奇数页。

@page :left {
  margin-left: 3cm;
}
@page :right {
  margin-left: 4cm;
}

规则还定义了两个伪类选择器。:first选择器选中是文档的第一页。

@page :first {}

:blank伪类选择器选中任何“故意左侧留白”的页面。要添加这样的文字,我们可以使用目标是边距盒顶部中心的生成内容。

@page :blank {
  @top-center { content: "This page is intentionally left blank." }
}

生成内容和页面媒体

@page:right{ 
    @bottom-left {
      margin: 10pt 0 30pt 0;
      border-top: .25pt solid #666;
      content: "My book";
      font-size: 9pt;
      color: #333;
    }
}

2.2.1分页符
要强制标题总是处于页面开头,把page-break-before设置为always。

h1 {
  page-break-before: always;
}

为了避免标题后立即断页,使用page-break-after。

h1, h2, h3, h4, h5 {
  page-break-after: avoid;
}

为了避免断开图像和表格,使用page-break-inside属性

table, figure {
  page-break-inside: avoid;
}

2.2.3计数器

@page:right{
  @bottom-right {
    content: counter(page);
  }
}
@page:left{
  @bottom-left {
    content: counter(page);
 }
}

我们还创建了一个叫做pages的计数器。这个计数器的值总是文档总页数

@page:left{
  @bottom-left {
    content: "Page " counter(page) " of " counter(pages);
  }
}

你可以创建自己命名的计数器和增量并且按需要重置它们

body {
  counter-reset: chapternum;
}
h1.chapter:before {
  counter-increment: chapternum;
  content: counter(chapternum) ". ";
}

通常给图像计数的方法是使用chapternum.figurenum。所以“Figure 3-2”代表第三章第二幅图。在h1里,我们可以重置figurenum让它每章都从1开始。

body {
  counter-reset: chapternum figurenum;
}
h1 {
  counter-reset: figurenum;
}
h1.title:before {
  counter-increment: chapternum;
  content: counter(chapternum) ". ";
}
figcaption:before {
  counter-increment: figurenum;
  content: counter(chapternum) "-" counter(figurenum) ". ";
}

2.2.4设置字符
我们在想要获取内容的选择器中使用string-set属性来实现,这将成为h1。string-set的值是你想给这段内容取得名字然后使用content()。随后你可以用string()作为生成内容输出。

h1 { 
  string-set: doctitle content(); 
}
@page :right {
  @top-right {
    content: string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 8pt;
  }
}

当你的页面媒体生成后,每当出现h1,内容被写入doctitle然后输出到右侧页的右上边距盒中,只有当另一个h1出现才发生改变。

2.2.5target-counter
target-counter,添加这些数字。在文档中创建链接时,赋予它们href,值为你想要标记的文档中的元素的ID。此外,增加一个类来识别它们是交叉引用,而不是一个外部链接;我用xref

<a class="xref" href="#ch1" title="Chapter 1">Chapter 1</a>
a.xref:after {
  content: " (page " target-counter(attr(href, url), page) ")";
}

3、自测打印

可以安装price:https://www.princexml.com/doc/installing/#installing-a-license-file-on-windows
安装完成之后可以到price的执行exe,prince xxx.html即可

参考链接:https://blog.csdn.net/weixin_33851604/article/details/93645760

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/11693.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring学习第6篇: 基于注解使用IOC

大家家好&#xff0c;我是一名网络怪咖&#xff0c;北漂五年。相信大家和我一样&#xff0c;都有一个大厂梦&#xff0c;作为一名资深Java选手&#xff0c;深知Spring重要性&#xff0c;现在普遍都使用SpringBoot来开发&#xff0c;面试的时候SpringBoot原理也是经常会问到&…

【数据链路层】封装成帧和透明传输和差错控制

注&#xff1a;最后有面试挑战&#xff0c;看看自己掌握了吗 文章目录前言链路层功能功能封装成帧和透明传输组帧的四种方法透明传输差错控制检错编码差错链路层的差错控制检错编码纠错编码链路层代码实现&#x1f343;博主昵称&#xff1a;一拳必胜客 &#x1f338;博主寄语&a…

27.gateway的限流实战(springcloud)

1 什么是限流 通俗的说&#xff0c;限流就是限制一段时间内&#xff0c;用户访问资源的次数&#xff0c;减轻服务器压力&#xff0c;限流大致分为两种&#xff1a; 1. IP 限流&#xff08;5s 内同一个 ip 访问超过 3 次&#xff0c;则限制不让访问&#xff0c;过一段时间才可继…

E-Prime心理学实验设计软件丨产品简介

拖放设计 通过将对象拖放到时间轴上来构建文本、图像、声音和视频的实验。利用我们的实验库中的免费模板和预建实验。 计时精度 E-Prime 3.0 将计时精度报告到毫秒精度级别。请务必使用我们的测试工具来确认您的计算机硬件能够进行关键计时。将Chronos添加到您的研究设置中&a…

Kubernetes 系统化学习之 资源清单篇(三)

Kubernetes 是一个可移植的、可扩展的开源平台&#xff0c;用于管理容器化的工作负载和服务&#xff0c;可促进声明式配置和自动化。Kubernetes 拥有一个庞大且快速增长的生态系统。 根据不同的级别&#xff0c;可以将 Kubernetes 中的资源进行多种分类。以下列举的内容都是 K…

轻松学习jQuery控制DOM

✅作者简介&#xff1a;热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏&#xff1a;前端开发者…

ESP8266--Arduino开发(驱动WS2812B)

文章目录一、WS2812彩灯介绍二、安装Adafruit_NeoPixel驱动库三、Adafruit_NeoPixel库常用接口四、使用示例五、网页端控制WS2812B灯带实例一、WS2812彩灯介绍 WS2812是一个集控制电路与发光电路于一体的智能外控LED光源&#xff0c;外型与5050LED灯珠相同&#xff0c;每个灯珠…

Linux修改默认登录端口22

目录 一、编辑sshd配置 二、重启sshd 三、防火墙开放端口 四、重启防火墙 五、测试连接 六、防火墙关闭22端口 前言&#xff1a;ssh登录的默认端口是22&#xff0c;如果不修改默认端口的话&#xff0c;会不安全&#xff0c;默认端口会遭到攻击&#xff0c;为了安全要修…

JavaEE之HTTP协议 Ⅰ

文章目录前言一、协议格式总结二、认识URL三、认识"方法"(method)1.GETGET请求的特点2.POSTPOST 请求的特点总结前言 网络技术中,最核心的概念,就是"协议",HTTP就是应用层典型的协议 应用层,很多时候需要程序员自定义应用层协议,也有一些现成的协议,供我们…

代码随想录算法训练营第57天 | 647. 回文子串 516.最长回文子序列 dp总结

代码随想录系列文章目录 动态规划篇 —— 区间dp 文章目录代码随想录系列文章目录动态规划篇 —— 区间dp647. 回文子串516.最长回文子序列代码随想录中动态规划总结647. 回文子串 题目链接 回文子串还是很难的我觉得&#xff0c;所以应该多做几遍 这道题的dp数组代表就不是问…

Linux之用户操作【用户的增删改查你要的都有】【详细】

目录用户相关介绍添加用户useradd [选项] 用户名passwd 用户名细节说明删除用户userdel 用户名userdel -r 用户名查询用户id 用户名切换用户su 用户名默认输入su切换到管理员目录用户组groupadd 组名userdel 组名补充&#xff1a; useradd -g 用户组 用户名补充&#xff1a;use…

BigLEN(rat)脑内最丰富的多肽之一、LENSSPQAPARRLLPP

BigLEN(rat) TFA 是脑内最丰富的多肽之一&#xff0c;是有效的 GPR171 激动剂&#xff0c;其EC50 值为1.6 nM。 BigLEN(rat) TFA, one of the most abundant peptides in brain, is a potent GPR171 agonist, with an EC50 of 1.6 nM[1][2].编号: 200557 中文名称: BigLEN(rat)…

详解MySQL事务日志——undo log

前言 众所周知&#xff0c;事务的一大特点是原子性&#xff0c;即同一事务的SQL要同时成功或者失败。那大家有没有想过在MySQL的innoDB存储引擎中是如何保证这样的原子性操作的&#xff1f;实际上它是利用事务执行过程中生成的日志undo log来实现的&#xff0c;那么undo log究…

加速推进企业信息化建设,SRM采购系统赋能建筑工程产业生态链实现数字化转型

建筑工程行业是拉动国民经济发展的重要支柱产业之一。近年来建筑业占国民生产总值的20&#xff05;左右&#xff0c;对国民经济影响很大。随着我国建筑业企业生产和经营规模的不断扩大&#xff0c;建筑业总产值持续增长&#xff0c;传统的管理手段早已无法实现企业的精细化管理…

Fiddler/Charles - 夜神模拟器证书安装App抓包

Fiddler/Charles - 夜神模拟器证书安装App抓包 文章目录Fiddler/Charles - 夜神模拟器证书安装App抓包前言一、软件安装1.Openssl安装1.1下载安装1.2配置环境变量1.3查看openssl版本&#xff0c;输入命令&#xff1a;openssl version2.夜神模拟器安装1.1 下载安装1.2工具准备&a…

三、RTMP协议 视频Chunk和音频Chunk到底长啥样?

重要概念 RTMP Chunk Header RTMP Chunk Header的长度不是固定的&#xff0c;分为: 12 Bytes、8 Bytes、4 Bytes、1 Byte 四种&#xff0c;由RTMP Chunk Header前2位决定。 FLV VideoTagHeader 分析RTMP流时&#xff0c;经常看到与0x17或0x27进行比较的情况&#xff0c;那0x1…

Azide-PEG-acid,N3-PEG-COOH,叠氮-聚乙二醇-羧基多用于点击化学

Azide-PEG-acid&#xff08;N3-PEG-COOH&#xff09;&#xff0c;该化学试剂的中文名为叠氮-聚乙二醇-羧基&#xff0c;它所属分类为Azide PEG Carboxylic acid PEG。 该peg试剂的分子量均可定制&#xff0c;有&#xff1a;1000、2000、3400、20000、10000、5000 。该试剂质量…

k8s部署

kubernetes简要 Kubernetes 是用于自动部署, 扩展和管理容器化应用程序的开源系统. 它将组成应用程序的容器组合成逻辑单元, 以便于管理和服务发现 kubernetes 功能简介 服务发现和负载均衡 存储编排 自动部署和回滚 自动完成装箱计算 自我修复 密钥与配置管理 主机规…

UE5蓝图常用流程节点总结

整理了一下平常做功能开发比较常用的蓝图节点&#xff0c;目录如下&#xff1a; 1. ExecuteConsoleCommand 2. Do N 3. Do Once 4. DoOnceMultiInput 5. Gate 6.MultiGate 7. Branch 8. Sequence 9. FlipFlop 10. Delay 11. Retriggerable Delay 1. ExecuteConsole…

OffiSmart Summit智慧办公及空间管理上海线下峰会精彩亮点抢先看

“聚焦行业生态格局焕新&#xff0c;赋能智慧办公全面落地”——OffiSmart Summit上海国际智慧办公与空间管理峰会即将盛大召开&#xff0c;2022下半年不容错过的智慧办公行业盛会&#xff01;时间&#xff1a;2022年11月22日 9:00 - 16:30 地点&#xff1a;上海市浦东新区卓美…