html页面打印样式的简单介绍

IT服务网

作者

华为云服务器特价优惠火热进行中！

2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。

合作流程：
1、点击链接注册/关联华为云账号：点击跳转
2、添加客服微信号：cloud7591，确定产品方案、价格方案、服务支持方案等；
3、客服协助购买，并拉微信技术服务群，享受一对一免费技术支持服务；
★技术专家在金蝶、华为、腾讯原厂有多年工作经验，并已从事云计算服务8年，可对域名、备案、网站搭建、系统部署、AI人工智能、云资源规划等上云常见问题提供更专业靠谱的服务，对相应产品提供更优惠的报价和方案，欢迎咨询。

本篇文章给大家谈谈html页面打印样式，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

如何让HTML页面支持打印页面

在HTML网页上打印需要的内容，JS代码

通常在浏览网页的时候，网页上总是出现一些和内容无关的内容，在打印的时候，要是把整个网页都打印下来，总会有些不方便。。。所以在有需要打印的网页上稍微设置一下打印页是很有必要的。。。

首先在head里面加入下面一段js代码：

---------------------------------------------

script language="javascript"

function preview(oper)

{

if (oper 10){

bdhtml=window.document.body.innerHTML;/ /获取当前页的html代码

sprnstr="!--startprint"+oper+"--";/ /设置打印开始区域

eprnstr="!--endprint"+oper+"--";/ /设置打印结束区域

prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); / /从开始代码向后取html

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));/ /从结束代码向前取html

window.document.body.innerHTML=prnhtml;

window.print();

window.document.body.innerHTML=bdhtml;

} else {

window.print();

}

/script

---------------------------------------------

然后在所需要打印的代码，用!--startprint1--和!--endprint1--包围着，如下：

---------------------------------------------

!--startprint1--

!--打印内容开始--

div id=sty

...

/div

!--打印内容结束--

!--endprint1--

---------------------------------------------

最后加上一个打印的按钮

input type=button name='button_export' title='打印1' onclick=preview(1) value=打印1

---------------------------------------------

另外说明一下，在一个HTML页面里面，可以设置多个打印区域，需要改动一下的就只是几个数字就OK了。如：

在选择第二个区域里面时用!--startprint2--!--endprint2--包围着，而按钮自然也改成对应的preview(1)了。这样第二区域的打印就完成。

还有一点，就是CSS样式表的问题了，打印的效果是不包含背景的打印的，设置是注意一下。style media="print"、link media="print"的用法合理应用，media="print"是不被网页所显示的，只能在打印的效果上存在，可以设置出打印效果和在网页上所显示的不一样。

如何实现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:none; WIDTH:6.5in; HEIGHT: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;

方法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以上版本。

html页面打印样式的简单介绍