首先我们来介绍一下@page的相关用法：
@page用于设置页面容器的版式，方向，边空等。
语法：
@page <label><pseudo-classes>{ sRules }
取值：
<label>：
页面标识符
<pseudo-class>：
打印伪类:first, :left, :right
在Firefox,Safari,Internet Explorer,Google Chrome,Opera等浏览器中，默认的页眉是网页title，页脚是第几页/共几页. 只有Microsoft Edge没有默认的页眉，页脚，为了样式统一，我们可以在打印时关闭浏览器自带页眉页脚，统一使用CSS定义的页眉页脚
请点击输入图片描述
接下来，我们在网页中定义专用于打印的CSS样式，在style标签中使用media="print"进行定义，如下
<style type="text/css" media="print">
接下来为每一页设置页边距
@page {margin-left: 50pxmargin-top: 100px}
如果有封面，可以用以下样式单独定义
@page :first {
margin-left: 50%
margin-top: 50%
}
具体样式可根据自己需要写入样式内
接下来再定义几个样式用于分页及页眉页脚
这是分页标记的样式
.geovindu{
page-break-after: always
}
这是页眉的样式
.pageheader {
margin-top: 10px
font-size:12pt
}
具体样式可根据自己需要写入样式内
这是页眉的样式
.pagefooter{
margin-top: 10px
font-size:10pt
}
具体样式可根据自己需要写入样式内
接下来在body标签内输入相关html标签并应用我们的样式
<body>
<script type="text/javascript">
document.querySelector("button").onclick = function () {
window.print()
}
</script>
<div id="geovindu" class="geovindu">
<div class="pageheader">页眉：打印测试</div>
<div class="conent">
封面内容
</div>
<div class="pagefooter">页脚：第1页/共2页</div>
</div>
<div id="geovindu" class="geovindu">
<div class="pageheader">页眉：打印测试</div>
<div class="conent">
第二页内容
</div>
<div class="pagefooter">页脚：第2页/共2页</div>
</div>
<button>打印按钮</button>
</body>
以上仅做为参考，可以根据自己的需要灵活使用
最后贴上完整html，大家可以复制到文本编辑中保存网页来测试
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打印测试页</title>
<style type="text/css" media="screen">
.pageheader ,.pagefooter {display:none}
</style>
<style type="text/css" media="print">
/*每一页 如果没有另外自定义的话 */
@page {margin-left: 50pxmargin-top: 100px}
/*第一页*/
@page :first {
margin-left: 50%
margin-top: 50%
}
/*分页标记*/
.geovindu{
page-break-after: always
}
.pageheader {
margin-top: 10px
font-size:12pt
}
.pagefooter{
margin-top: 10px
font-size:10pt
}
</style>
</head>
<body>
<script type="text/javascript">
document.querySelector("button").onclick = function () {
window.print()
}
</script>
<div id="geovindu" class="geovindu">
<div class="pageheader">页眉：打印测试</div>
<div class="conent">
封面内容
</div>
<div class="pagefooter">页脚：第1页/共2页</div>
</div>
<div id="geovindu" class="geovindu">
<div class="pageheader">页眉：打印测试</div>
<div class="conent">
第二页内容
</div>
<div class="pagefooter">页脚：第2页/共2页</div>
</div>
<button>打印按钮</button>
</body>
</html>
参考: The Ultimate Print HTML Template with Header &Footer | by Idan Cohen | Medium
使用 table 中的 thead 会在每页打印其中的内容, 而不需要打印页眉页脚的页面(头2页, 3页等), 继续使用 div static 布局
对 tr 使用 break-inside-avoid, break-after-auto
参考: How to Handle Page Breaks when Printing a Large HTML Table
如何实现HTML的打印和预览
HTML的打印和预览向来是个难题，但自从IE5.5推出后，情况大有改观。你可以利用其“打印模板”功能，实现自己的预览窗口和控制打印。“打印模板”的使用方法请参考MSDN Library中的Web Development >Programming and Reusing the Browser >Print Templates目录下的文章。从微软的网站上还可以下载到一个不错的例子，示例如何一步步由浅入深地使用Print Template
你会发现，要自己实现一个功能完善的打印模板也并非易事。IE浏览器本身带的打印模板做得还不错，能否在它的基础上加上自己的定制功能呢？答案是肯定的，至少从技术上看是这样（不考虑版权问题）。下面就介绍这偷懒的招。
用Visual Studio打开x:\Program Files\Internet Explorer\MUI804\SHDOCLC.DLL，会看到其资源目录。其中HTML/PREVIEW.DLG就是IE所带的打印模板了。把它export(导出)出来，把文件扩展名改成HTM，打开看看，是不是特刺激？PREVIEW.DLG用到了几个图片文件，在2110目录下，别忘了导出。（注：我的环境是Windows XP Professional英文版+SP1a，IE是6.0sp1。）
IE默认的模版中，页眉页脚均只支持纯文字。下面以定制HTML页眉为例，看看如何定制自己的打印模板。思路是：用自己的页眉内容换掉原有的内容，并修改其页眉高度和页边距使之和新的页眉相对应。
第一步，定义页眉。在要使用此模版预览打印的HTML文件中加入一个id为Header的div标记，括起HTML页眉内容，并制定以英寸为单位的页眉的高度和宽度，其中宽度应该和模版相符。例：
<div style="DISPLAY:noneWIDTH:6.5inHEIGHT:0.78in">
...（HTML页眉内容）
</div>
第二步，声明变量。在模版前面变量声明部分加上两个变量声明：
var g_htmlHeader = ""//用于保存页眉内容
var g_nHeaerHeight = 0//页眉的高度
第三步，取得页眉。在函数OnLoadBody()中的“Printer.footer = dialogArguments.__IE_FooterString”语句之后加入这段代码：
oPageHeader = dialogArguments.__IE_BrowseDocument.all.item("Header", 0)
if (null != oPageHeader)
{
g_htmlHeader = oPageHeader.innerHTML
g_nHeaerHeight = oPageHeader.style.posHeight
}
第四步，指定页边距和页眉高度。在上面的代码下面紧接着加入：
//指定页边距。其中40可以自己改，单位是百分之一英寸。
Printer.marginTop = 40 + (g_nHeaerHeight * 100)
Printer.marginBottom = 40
Printer.marginLeft = 40
Printer.marginRight = 40
在函数EnsureDocuments()中，
/*注释掉以下代码
if (header)
{
tmp = upTop + (27 / 100)
if (tmp >top)
top = tmp
}
if (footer)
{
tmp = upBottom + (27 / 100)
if (tmp >bottom)
bottom = tmp
}
*/
//紧接着加上：
tmp = upTop + g_nHeaerHeight
if (tmp >top)
top = tmp
//下面隔几行，注释掉：oRule.style.top = upTop + "in"
第五步，指定页眉内容。在函数CPrintDoc_AddPage()中，在“HeadFoot.page = HeadFoot.pageTotal”语句之后加入：
//这两行用于设置页码，你在页眉可以通过加入“[P]”和“[p]”分别代表总页数和当前页数。
g_htmlHeader = g_htmlHeader.replace("[P]", "<span ></span>")
var pageHeader = g_htmlHeader.replace("[p]", HeadFoot.pageTotal)
//下面隔3行，注释掉：
//~oPage.children("header").innerHTML = HeadFoot.HtmlHead
//~oPage.children("footer").innerHTML = HeadFoot.HtmlFoot
//下面隔几行，把“newHTM += HeadFoot.HtmlHead”改为：
newHTM += pageHeader
//然后注释掉（不要页脚）：newHTM += HeadFoot.HtmlFoot
至此，一个支持自定义HTML页眉的新模版就定制完成了。是不是觉得特爽？如果觉得它给你省下了两周的时间，就赶紧到“希望之光”网站上，花你2天的工资，资助一个小孩上学吧。
定制好的打印模板怎么用呢？请看以下代码：
var
vaIn, vaOut: OleVariant
CmdTarget : IOleCommandTarget
MyHandle : THandle
begin
vaIn := 'c:\\Preview.htm'
//预览方法1：WebBrowser1.ControlInterface.ExecWB(OLECMDID_PRINTPREVIEW, OLECMDEXECOPT_PROMPTUSER, vaIn, vaOut)
//下面是方法2：
if WebBrowser1.Document <>nil then
begin
WebBrowser1.Document.QueryInterface(IOleCommandTarget, CmdTarget)
if CmdTarget <>nil then
begin
try
CmdTarget.Exec( PGuid(nil), OLECMDID_PRINTPREVIEW, OLECMDEXECOPT_PROMPTUSER, vaIn, vaOut)
finally
CmdTarget._Release
end
end
else
begin
ShowMessage('IE不支持该功能，请升级至IE5.5以上。')
end
end
end
方法1简洁，但是如果WebBroswer不支持打印预览的话就会出错。第二种方法可能更好一些。
在打印预览时，预览窗口的尺寸大小总是和WebBrowser所在的Form的一样，而且没法最大化。更麻烦的是，如果你的表单是嵌入到了别的表单的组件上显示的，例如，Form1.Parent := Form2.Panel1，即Form1显示在Form2中Panel1所占据的位置，那么预览窗口就变得很小了，不拉大根本没法看。解决办法如下，在预览的代码后面加上以下代码，使预览窗口最大化：
Handle:=FindWindow('Internet Explorer_TridentDlgFrame', '打印预览')
if 0 <>MyHandle then
begin
ShowWindow(MyHandle , SW_MAXIMIZE)
end
如果不预览而是直接打印，则把OLECMDID_PRINTPREVIEW换成OLECMDID_PRINT就可以了。
如果要在Web应用中使用打印模板，可以通过ActiveX来实现调用。
注：打印模板需要安装Internet Explorer 5.5以上版本，本文其它功能需要安装Internet Explorer4.0以上版本。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）