一、打印内容
不打印可以设置display:none,其他打印样式可在@media print 单独设置
@media print {
.hidden-print {
display: none !important;
}
}二、打印边距设置
边距设置可设置页眉页脚显示隐藏，
@page{
// 只显示页码，根据实际内容调整，可根据浏览器打印预览设置边距设置修改选项查看
margin:5mm 13mm 0 4mm!important;
size: landscape;
/*portrait： 纵向打印,landscape: 横向*/// orphans属性指定必须留在页面底部的段落的最小行数。
// widows属性指定必须留在页面顶部的段落的最小行数。
// 这是在每页底部创建 4 行和在顶部创建 3 行的示例 -
orphans:4;
widows:3;
}其他page设置
@page {// 每个打印页设置
margin: 1cm;
}@page :first { // 针对第一页设置
margin: 2cm;
}@page :left{ // 对打印文档的左侧页设置CSS样式
margin: 2cm;
}@page :right{ // 对打印文档的右侧页设置CSS样式
margin: 2cm;
}三、设置打印分页相关
应用于：position 值为 relative 或 static 的非浮动块级元素。绝对定位和固定定位无效
page-break-before元素在指定元素前添加分页符。该css使用后内容始终位于页前
文章图片
page-break-after 属性设置元素后的 page-breaking 行为。
文章图片
page-break-inside属性用于设置是否在指定元素中插入分页符
// 避免图片被截断
img{
page-break-after: always!important;
page-break-inside: avoid!important;
}四、页眉页脚自定义设置
参考如何从浏览器打印重复标题
//页眉
![html|前端打印设置相关]()
页脚
css分页计数器
// 定义重置计数器标签
h1 {counter-reset:subsection;
}h2:before
{
// 定义计数器计算标签
counter-increment:subsection;
content: counter(subsection) " ";
}【html|前端打印设置相关】
推荐阅读
- HTML+CSS|【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
- 前端|【HTML+CSS+JS】注册页面模板
- html|html 爱心树,jQuery结合HTML5制作的爱心树表白动画
- CSS样式|CSS效果集合
- 纯css3实现下拉箭头、关闭按钮旋转效果
- HTML|行内块元素和行内元素 代码换行造成的间隙
- javascript|客观评价 增长趋势比 vite 还猛的 TailwindCSS
- html|Vue项目实战
- 前端|【前端面试必知】行内块元素之间的空白间隔是什么原因引起的