如何实现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以上版本。
1、安装View In Browser插件
快捷键 Ctrl+Shift+P(菜单栏Tools->Command Paletter),输入 pcip选中Install Package并回车,输入View In Browser的插件回车就安装了
2、注意左下角的小文字变化,会提示安装成功
设置快捷键
菜单栏Preferences->Key Bindings-User),打开Default (Windows).sublime-keymap文件编辑,或者F:\ProgramFiles\Sublime Text 3\Data\Packages\User编辑Default (Windows).sublime-keymap
输入如下内容:
[ { "keys": ["ctrl+alt+f"], "command": "open_in_browser" },]
3、快捷键使用
编辑index.html文件,使用快捷键ctrl+alt+f,浏览编辑效果,这里使用默认浏览器打开;
额。。。我没有下open_in_browser,按照下面步骤设置成功了。配置在Chrome,Firefox中打开
安装 SideBarEnhancements(packages control->输入install packages->SideBarEnhancements能找到这个插件)
然后通过ctrl + k, ctrl + b打开侧边栏,在侧边栏的html文件上右击,找到 open width ->edit applications
然后在这里边设置firefox打开的方式。
application : 路径要修改为自己默认安装的路径。
[
{"id": "side-bar-files-open-with",
"children":
[
//application firefox
{
"caption": "firefox",
"id": "side-bar-files-open-with-firefox",
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
"extensions":".*" //any file with extension
}
},
{"caption":"-"},
{
"caption": "chrome",
"id": "side-bar-files-open-with-chrome",
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"extensions":".*" //any file with extension
}
}
]
}
]
设置快捷键
Key bindings ->User
[
{ "keys": ["ctrl+shift+c"], "command": "copy_path" },
{ "keys": ["alt+f12"], "command": "open_in_browser" },
{ "keys": ["f12"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
"extensions":".*" //any file with extension
} },
{ "keys": ["ctrl+f12"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"extensions":".*" //any file with extension
}
}
]
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)