html css print打印，打印样式

文章目录

html css print打印，打印样式
- 1：去除默认页眉页脚
- 2：分页
- 3：自定义页眉页脚
- 4：单独设置打印样式

默认打印效果如上，分别表示日期，html标题，文件路径和页码。

1：去除默认页眉页脚

要删除页脚，只需要设置页边距。

        @page {margin: 20px;}

2：分页

您可以使用足够的内容来散布用于分页的内容，也可以使用page-break-before进行强制分页显示。

例如，我希望每个h1标签的内容都显示在新页面上。

        h1 {page-break-before: always;}

     <body><h1>HI</h1><h1>HELLO</h1><h2>tao</h2></body>

3：自定义页眉页脚

根据打印规则，具有固定位置（固定）的元素将显示在每页上。

根据此原理，我们可以自定义和设置页眉和页脚。当然，我们上面提到的方法也可以实现。

创建一个

        h1 {page-break-before: always;}nav{color: red;position: fixed;top: 0;}

     <body><nav>自定义页头</nav><h1>HI</h1><h1>HELLO</h1><h2>tao</h2></body>

可以根据自己的喜好随意修改内容。

        footer{color: red;position: fixed;bottom: 0;}

     <body><nav>自定义页头</nav><h1>HI</h1><h1>HELLO</h1><h2>tao</h2><footer>自定义页脚</footer></body>

4：单独设置打印样式

很多时候我们不想在打印时显示相关内容，如何实现？

我们可以使用 media print 属性来单独设置相关样式。

        @media print {h2 {display: none;}}

     <body><nav>自定义页头</nav><h1>HI</h1><h1>HELLO</h1><h2>tao</h2><footer>自定义页脚</footer></body>

这对您有帮助，请记住喜欢并关注哦。

html css print打印，打印样式相关推荐

css @media print控制打印样式
print 用于打印机样式修改伪类修改样式 :left.:right.:first. :left 和 :right 通过 :left 和 :right 设置左右页面不同样式,并不代表用户代理会将页面 ...
PrintArea打印，@media screen解决移动web开发的多分辨率问题，@media print设置打印的样式...
PrintArea打印,局部DIV打印插件,依赖JQuery. github:https://github.com/RitsC/PrintArea 当打印时需要临时改变页面布局,可以使用 @media ...
html表格打印填充分页,window.print()页面打印之表格内容分页填充进行分页打印
windwow.print()用于打印当前窗口的内容,很简便,可当内容特殊并且打印有特殊需求的时候就要绕个圈了.下面是需要打印的表格: 当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出 ...
window.print()实现打印指定内容——功能实现
最近在做后台管理系统时,需要实现一个打印功能,打印的内容为页面上指定的dom.此时可以通过window.print()功能来实现: html部分 <button @@click="pr ...
Vue -print - nb 打印插件使用详解以及连打操作
Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...
如何使用CSS创建易于打印的页面
"谁打印网页?" 我听到你哭了!相对而言,很少有纸页可以复制.但是请考虑: 打印旅行或音乐会门票复制路线方向或时间表保存副本以供离线阅读在连通性差的区域中访问信息在危险或肮脏的条件 ...
window.print()页面打印之表格内容分页填充进行分页打印
windwow.print()用于打印当前窗口的内容,很简便,可当内容特殊并且打印有特殊需求的时候就要绕个圈了.下面是需要打印的表格: 当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出 ...
vue + vue-print-nb 实现打印以及样式布局问题
步骤: 1.安装插件: npm i vue-print-nb npm install vue-print-nb --save 2.在 main.js 中引用 import Print from 'vu ...
lodop打印html没有样式,关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案...
关于Lodop打印是个很牛逼的打印插件,但是打印Bootstrap的样式的时候很恶心比如:页面是这样打印之后的效果恶心的不要不要的单独修改后的样式出现这样的问题就是可能是bs把这个插件当做手机 ...

html css print打印，打印样式

html css print打印，打印样式

文章目录

1：去除默认页眉页脚

2：分页

3：自定义页眉页脚

4：单独设置打印样式

html css print打印，打印样式相关推荐

最新文章

热门文章