-
2022-02-22 15:05:38
css 样式
page-break-after: always; /在标签后换页/
page-break-before: always; /在标签前换页//* 目录 */ .mce-toc { border: none; page-break-after: always; }
可以打开浏览器 -> 打印 -> 查看效果
HTML中不体现更多相关内容 -
js控制分页打印、打印分页示例
2020-12-02 19:30:45代码如下: <%... charset=UTF-8″ pageEncoding=”UTF-8″%> <!... <HEAD>...javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Content-Type content=”text/html -
html打印分页自带表头表尾
2018-05-14 14:15:17需要自己写打印程序时,会遇到打印分页都需有表头表尾的问题,html打印分页自带表头表尾,可以参考学习下 -
打印分页,html强制分页
2012-09-25 00:18:51打印分页,html强制分页,一个表格一页,可以查看打印预览 -
JS 实现分页打印功能
2021-01-19 17:15:14在调用window.print()时,可以实现打印效果,但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件的... -
前端 打印 分页显示
2022-03-22 17:14:44charset=UTF-8"> 打印title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <style> h4 { font-size: 23px;...<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0051)http://localhost:8080/MDITIP/printOutContent.action --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>打印</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <style> h4 { font-size: 23px; font-weight: 400; width: 50%; text-align: center; margin: 0 auto; } em { font-style: normal } b { margin-left: 20px; } input { border: 0; outline: none; cursor: pointer; } span { width: 30%; float: right; } table { width: 100%; border: 1px solid #222; border-top: none; border-bottom: none; } td { width: 15%; height: 44px; border: 1px solid #222; text-align: center; } #headerInfo td { width: 15%; height: 44px; border: 1px solid #222; text-align: center; /* word-wrap: break-word; word-break: normal; */ page-break-after: always; } @media print { .pageBreak { page-break-after: always; } .noPrint { display: none; } } </style> </head> <body> <div id="print-content"> <div class="header"> <h4>长阳土家族自治县职业教育中心学生学籍卡</h4> </div> <p> <b><em>经办人:</em><input type="text"></b> <span>打印日期:</span> </p> <!-- 页面记录信息 --> <table cellpadding="0" cellspacing="0"> <tr> <td>姓名</td> <td></td> <td>性别</td> <td></td> <td>出生日期</td> <td></td> <td rowspan="3">照片</td> </tr> <tr> <td>民族</td> <td></td> <td>政治面貌</td> <td></td> <td>班级</td> <td></td> </tr> <tr> <td>学号</td> <td></td> <td>学制</td> <td></td> <td>学籍号</td> <td></td> </tr> <tr> <td>年级</td> <td></td> <td>专业</td> <td></td> <td>身份证号</td> <td colspan="2"></td> </tr> <tr> <td>入学年月</td> <td></td> <td>入学方式</td> <td></td> <td>学习形式</td> <td colspan="2"></td> </tr> <tr> <td>家庭住址</td> <td colspan="3"></td> <td>毕业时间</td> <td colspan="2"></td> </tr> <tr> <td>异动情况</td> <td colspan="7"></td> </tr> <tr> <td colspan="8">学业成绩</td> </tr> <tr> <td>学期</td> <td>课程名称</td> <td>成绩</td> <td>课程名称</td> <td>成绩</td> <td>课程名称</td> <td>成绩</td> </tr> </table> <table cellpadding="0" cellspacing="0" id="yi"> <tr> <td rowspan="5">第一学期</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <table cellpadding="0" cellspacing="0" id="er"> <tr> <td rowspan="5">第二学期</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <table cellpadding="0" cellspacing="0" id="san"> <tr> <td rowspan="5">第三学期</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <table cellpadding="0" cellspacing="0" id="si"> <tr> <td rowspan="5">第四学期</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <table cellpadding="0" cellspacing="0" id="wu"> <tr> <td rowspan="5">第五学期</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> <table cellpadding="0" cellspacing="0" id="liu"> <tr> <td rowspan="5">第六学期</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </body> </html> <script> var clientH22 = document.body.clientHeight var clientH33 = window.screen.availHeight var scrollH = document.body.scrollHeight var yiDom = document.getElementById("yi") var yiH = yiDom.offsetHeight var erDom = document.getElementById("er") var erH = erDom.offsetHeight var sanDom = document.getElementById("san") var sanH = sanDom.offsetHeight var siDom = document.getElementById("si") var siH = siDom.offsetHeight var wuDom = document.getElementById("wu") var wuH = wuDom.offsetHeight var liuDom = document.getElementById("liu") var liuH = liuDom.offsetHeight var siNumH = erH + sanH + siH erDom.classList.add("pageBreak") if(yiH>230){ yiDom.classList.add("pageBreak") wuDom.classList.add("pageBreak") } if(erH > 230){ yiDom.classList.add("pageBreak") erDom.classList.remove("pageBreak") } if(sanH > 300){ erDom.classList.remove("pageBreak") sanDom.classList.add("pageBreak") siDom.classList.remove("pageBreak") wuDom.classList.remove("pageBreak") } if(siH > 400){ siDom.classList.add("pageBreak") liuDom.classList.remove("pageBreak") wuDom.classList.remove("pageBreak") } if(wuH > 400){ wuDom.classList.add("pageBreak") liuDom.classList.remove("pageBreak") } if(liuH > 400){ wuDom.classList.add("pageBreak") } if((erH + sanH)>600){ sanDom.classList.add("pageBreak") siDom.classList.remove("pageBreak") wuDom.classList.remove("pageBreak") liuDom.classList.remove("pageBreak") }else if((sanH +siH)>700){ // siDom.classList.add("pageBreak") wuDom.classList.remove("pageBreak") liuDom.classList.remove("pageBreak") } if((siH + wuH) >700){ wuDom.classList.add("pageBreak") liuDom.classList.remove("pageBreak") } console.log("erH",erH) console.log("sanH",sanH) console.log("siH",siH) console.log("wuH",wuH) console.log("liuH",liuH) if((erH + sanH + siH)>700){ sanDom.classList.add("pageBreak") siDom.classList.remove("pageBreak") wuDom.classList.add("pageBreak") } </script>
-
jqprint 打印分页
2022-02-11 10:55:01<script type="text/javascript" src="./jquery.jqprint-0.3.js">script> <div id="div_print_area"> @foreach ($data as $v) ;... }) 要分页的结尾处加上 ;">div> 在打印内容最前面加不会打印白纸<script type="text/javascript" src="./jquery.jqprint-0.3.js"></script> <div id="div_print_area"> @foreach ($data as $v) <div style="page-break-after:always;"></div> <div> 运单号:{{$v['waybill_num']}} </div> @endforeach </div> <button class="layui-btn" id="print" >打印</button>
$(document).delegate("#print","click",function () { $("#div_print_area").jqprint({ debug: false, //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件) printContainer: true, //表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。 operaSupport: true //表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true }); })
要分页的结尾处加上
<div style="page-break-after:always;"></div>
在打印内容最前面加不会打印白纸
-
网页中如何用 CSS 设置打印分页符
2021-06-18 07:47:34Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;。第1页第2页第3页任何浏览器都支持 page-break-after:always;,但 page-break-after 的其他属性值 left、...Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;。
第 1 页
第 2 页
第 3 页
任何浏览器都支持 page-break-after:always;,但 page-break-after 的其他属性值 left、right、inherit、avoid 则总有一些浏览器不支持。page-break-after 应用于 position 值为 relative 或 static 的非浮动块级元素。元素或父元素的 display 为 none 时,page-break-after 不起作用。
上面把 page-break-after 应用在一个空白的 div,使看起来更像一个分页符,其实 page-break-after 应用在当前页的最后一个标签,比如下面的代码:
第 1 页
第 1 页
第 2 页
第 2 页
第 3 页
第 3 页
page-break-after 的元素在打印时,必须是可显示的,否则不起作用。
Bootstrap css栅格 + 网页中插入代码+css表格
设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格:
如何用css写打印样式
打印样式 打印样式就是针对网页被打印时设置给文档的样式,由于打印时是显示在纸上,跟屏幕还是有区别的,对于有打印需求的网页往往需要设置专门的打印样式来适配页面. @media print 声明自己是打印 ...
网页中三角型的CSS实现
我们在使用CSS框架的时候,经常会用到下拉框组件,一般该组件里面有个下三角.很多网上用到三角形,如图所示,这个三角形是如何实现的呢? 1.使用CSS可以实现,先来复习一CSS盒子模型相关知识.给出如下 ...
一、HTML和CSS基础--网页布局--如何用css进行网页布局
什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...
如何用css设置鼠标属性的小手
在元素中添加οnmοuseοver="this.style.cursor='hand'"或者 cursor:pointer;
C# 网络编程之webBrowser获取网页url和下载网页中图片
该文章主要是通过C#网络编程的webBrowser获取网页中的url并简单的尝试瞎子啊网页中的图片,主要是为以后网络开发的基础学习.其中主要的通过应用程序结合网页知识.正则表达式实现浏览.获取url. ...
LODOP设置打印份数及是否逐份输出
LODOP中通过SET_PRINT_COPIES可以设置打印份数,例如:LODOP.SET_PRINT_COPIES(2);//指定份数为2份 如果一个任务里有多页,打印份数的时候,有两种输出方式,一 ...
word 的使用 —— 分页符与分节符
节的概念:节定义了一些格式, 如页边距.页面的方向.页眉和页脚,以及页码的顺序. 分节符是指为表示节的结尾插入的标记. 分节符的作用: 分节符起着分隔其前后文本格式的作用,如果删除了某个分节符,它前面 ...
php部分:网页中报表的打印,并用CSS样式控制打印的部分;
网页中报表的打印,是通过调用window对象中的print()方法实现打印功能的: 调用浏览器本身的打印功能实现打印
debug = True开启debug模式 当你的代码在界面增减之后不用刷新界面自动更新 app.logger.error("这是error模式") app.logger.info ...
-
html 打印分页
2019-09-18 20:21:48转载地址 https://blog.csdn.net/liuxing393724034/article/details/83624548 很简单,只要在需要分页的地方加上一行代码: <div style="page-break-after: always;"></div> ... -
【js 打印分页】
2022-05-16 09:58:32vue框架中 实现打印分页的功能vue框架中 实现打印分页的功能分页方法代码实现 vue框架中 实现打印分页的功能 在项目开发中经常会遇到打印的功能,有时候还会遇到不定长的打印内容,多个内容一起打印,这时候需要我们... -
jQuery打印指定区域Html页面并自动分页
2021-01-19 18:21:14但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页 <div xss=removed></div> 有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件中的属性参数。 PrintArea部分源码: var modes = { ... -
Microsoft Project怎么打印 分页打印设置方法
2021-07-27 10:19:49Microsoft Project 制作完成流程图后,就可以进行打印了,大多数项目进度计划图篇幅较大,一张纸根本打印不完整,或者打印后字体太小,这时候就需要设置分页打印,下面就跟小编来看看具体步骤吧。首先我们登陆... -
css 打印分页_高级CSS打印-使用CSS分页符
2020-08-01 06:08:53css 打印分页I have one customer that absolutely insists his web pages print perfectly. Why? Because he refuses to look at his pages on the screen -- he tells his employees to print the website for him... -
打印分页
2018-10-08 14:09:28在进行批量打印时,可能需要强制分页,即打完一段内容后,其余内容要换到下一张打印纸中显示,可以使用 page-break-after:always;进行分页; 例子:`&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div id=&... -
web 页面分页打印的实现
2021-01-21 12:39:071.首先引入一个WebBrowser在需要打印的页面,可以直接添加: 代码如下: <object id=”WebBrowser” classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=”0″ width=”0″> </object> 到页面... -
js 调取浏览器 打印 分页
2020-10-09 17:02:37在浏览器中,可以调用Bom中的打印方法,来实现调用浏览器的打印。 window.print(); 但是打印时显示了打印按钮,希望在打印时隐藏相关元素 这个可以通过css样式来解决,如下 /* 通过设置 media='print' 在打印... -
table打印分页问题解决
2021-06-23 11:15:31// 防止table数据太多,tr分页错乱 3.td设置border: 1px solid #000;// 防止部分分页的tr边框线没有 .checkprint-table { margin-top:10px; display: table; width: 960px; font-family: 仿宋 !important; font-size... -
C# printdocument打印分页处理
2021-07-13 17:06:59ownBitmap是一个Bitmap的List,我在外面已经分好页了,只需要挨个打印出来就可以了; 顺便记一下绑定的方法: private System.Drawing.Printing.PrintDocument docToPrint = new System.Drawing.Printing.... -
[前端]简要记录css控制打印分页
2021-02-22 11:37:10在调用window.print()时,可以实现打印效果,但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示,这两个属性是用来控制文件... -
css 打印分页_使用CSS3分页符组织打印页面
2020-06-11 09:28:35} 更多资源 我们已经讨论了控制用于Web内容的打印介质中的分页符的基本方法,并且希望这鼓励您考虑网站中的打印样式,以便您的内容在屏幕和纸张上都看起来不错。 有关更多信息,请转到以下参考。 CSS分页媒体模块... -
Excel学习笔记:P12-打印分页设定
2021-07-27 09:15:30文章目录前言一、设置分页符二、使用宽、高、缩放比例进行调整 前言 在打印Excel表格时,经常会遇到一些版面问题。Excel不像Word,直接可以从界面中看到打印的范围、边界的大小等。 一、设置分页符 现在我手上有一... -
js 打印分页
2019-07-18 14:19:17js 打印分页 将要分页的元素的外层 div 设置属性 page-break-before: always; (这个属性正在被更通用的 break-before取代) 注意: 该 div 的 display 属性值是 block ,position 属性值是 relative 才起作用 ... -
对table的设置及打印分页
2020-07-29 11:51:17设置打印分页: 说明:page-break-after:always 控制分页 .pageSeparator{visibility:hidden; page-break-after:always; overflow:hidden; height:0px;} <div class="pageSeparator"></div> 3.设置细边框 table .... -
CSS控制网页打印的几个技巧:网页打印分页和网页打印隐藏控制
2021-06-13 09:14:47B/S结构的系统想要控制打印还是远比过去C/S的要困难一些,格式上调整比较麻烦。最近icech接触了几个客户的需求,要求网页打印,如何能在保持现有程序不变的前提下,实现一些打印的需求呢?下面介绍几个CSS控制打印的... -
html - 浮动的HTML / CSS打印分页符不起作用(例如:引导程序) - 堆栈内存溢出
2021-06-12 05:06:34首先,分页符不能在绝对定位的元素中使用,因此请确保分页符不在一个元素中。现在,由于浮动导致分页符被忽略,因此我们需要清除浮动。问题很clear: both; 如果带有page-break-after: always;的元素page-break-after... -
Qt表格分页打印
2017-10-19 19:12:03Qt表格分页打印