二.LayoutRect ,定义页面内容风格:跟 DeviceRect 一样,不同的页面,要进行 LayoutRect 引用时都需要添加 LayoutRect 标记,其智能添加方法将在后面介绍; LayoutRect 与 DeviceRect 如果在同一个页面中同时出现,则前者需放在后者之内;另外, LayoutRect 对内容风格的设定,也通过 Style 得以实现。例二:我们来定制如下的内容风格的打印模板:5.5 inches 宽
8 inches 高
与打印纸张边缘,四边保持 1 inch 的宽度(加上页面本身的边缘宽度,为实际的打印边缘宽度)
白色背景
1 inch 宽的虚线边界先定制名为 contentstyle 的风格:<STYLE TYPE="text/css">
.contentstyle
{
width:5.5in;
height:8in;
margin:1in;
background:white;
border:1 dashed gray;
}
</STYLE> 然后下面是进行引用的完整网页代码:<HTML>
<HEAD>
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
<STYLE TYPE="text/css">
.contentstyle
{
width:5.5in;
height:8in;
margin:1in;
background:white;
border:1 dashed gray;
}
</STYLE>
</HEAD><BODY>
<IE:LAYOUTRECT ID="layoutrect1" CONTENTSRC="2.html" CLASS="contentstyle" NEXTRECT="layoutrect2"/><IE:LAYOUTRECT ID="layoutrect2" CLASS="contentstyle"/>
</BODY>
</HTML>
跟例一中的源代码相比,例二中只是以 LayoutRect 代替了原来的 DeviceRect 标记;DeviceRect 定制的是模板整体风格,而 LayoutRect 定制的是具体内容的版面风格;LayoutRect 的 ID 属性也具有唯一性; CONTENTSRC 属性则指明了具体的将起作用网页文件;CLASS 指明了风格的引用对象;跟 DeviceRect 不同,在进行 LayoutRect 引用时,必须在每个页面指定 NEXTREC ,即依次排列的下一个内容风格,这里的"下一个内容"用其页面的相应 ID 进行标识,如本例中的 LayoutRect2 。三.DeviceRect 与 LayoutRect 的协同作战:上面我们分别讨论了 DeviceRect 与 LayoutRect 的作用与引用方法,现在我们来看一下,如何在同一个打印模板中进行定制与引用。在每一个打印模板上,必然包含两方面的内容,一个是整体的模板风格(DeviceRect),另一个是内容风格(LayoutRect);第一个打印页面跟其他页面是不同的,因为第一个页面中必须指明 CONTENTSRC 属性,而同一打印任务中的其他页面不再需要进行 CONTENTSRC 的指定。例三:下面是第一个页面中的 DeviceRect 代码:<IE:DEVICERECT ID="page1" CLASS="masterstyle" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect1" CONTENTSRC="2.html" CLASS="contentstyle" NEXTRECT="layoutrect2"/>
</IE:DEVICERECT>下面是其他页面中的 DeviceRect 代码:<IE:DEVICERECT ID="page2" CLASS="masterstyle" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect2" CLASS="contentstyle"/>
</IE:DEVICERECT> 下面我们将 DeviceRect 与 LayoutRect 结合起来使用,其源代码如下:<HTML XMLNS:IE>
<HEAD>
<?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
<STYLE TYPE="text/css">
.contentstyle
{
width:5.5in;
height:8in;
margin:1in;
background:white;
border:1 dashed gray;
}
.Mystyle1
{
width:8.5in;
height:11in;
background:#FFFF99;
border-left:1 solid black;
border-top:1 solid black;
border-right:4 solid black;
border-bottom:4 solid black;
margin:10px;
}
</STYLE>
</HEAD><BODY>
<IE:DEVICERECT ID="page1" CLASS="Mystyle1" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect1" CONTENTSRC="2.html" CLASS="contentstyle" NEXTRECT="layoutrect2"/>
</IE:DEVICERECT><IE:DEVICERECT ID="page2" CLASS="Mystyle1" MEDIA="print">
<IE:LAYOUTRECT ID="layoutrect2" CLASS="contentstyle"/>
</IE:DEVICERECT></BODY>
</HTML> 

解决方案 »

  1.   

    四.DeviceRect 与 LayoutRect 标记的动态自动添加:前面我们说到,每个单独的打印页面都需要各自的 DeviceRect 与 LayoutRect 标记,那么,如果我们有 1000 个页面需要打印,是否就要在每个页面上重复繁琐的 Copy & Paste 操作?答案是否定的,我们完全可以通过 JavaScript 脚本来完成这一繁琐的工作。要实现 HTML 声明的动态创建,关键在于 <DIV> 标记的定义,下面是其定义规则。<DIV ID="devicecontainer">
    ......
    </DIV><DIV>与</DIV>之间,采用 insertAdjacentHTML() 方式,并主要利用了其 afterBegin 与 BeforeEnd 两个变量,现在我们将第一个页面"插入"到<DIV></DIV>之间:devicecontainer.insertAdjacentHTML("afterBegin", newHTML);具有继承属性的后续页面,调用 beforeEnd 变量:devicecontainer.insertAdjacentHTML("beforeEnd", newHTML);要装载 devicecontainer 页面,还需在 <Body>中添加:<BODY ONLOAD="addFirstPage()">现在我们在 JavaScript 中添加包含前面详细介绍的 LayoutRect 与 DeviceRect 元素,用到的命令是 addFirstPage() 。需要注意的是,newHTML 标记后使用的是双引号,而 LayoutRect 与 DeviceRect 标记后的变量使用单引号。如下:function addFirstPage() {
    newHTML = "<IE:DEVICERECT ID='devicerect1' MEDIA='print' CLASS='mystyle1'>";
    newHTML += "<IE:LAYOUTRECT ID='layoutrect1' CONTENTSRC='2.html'" + "ONLAYOUTCOMPLETE='onPageComplete()' NEXTRECT='layoutrect2'" + "CLASS='contentstyle'/>";
    newHTML += "</IE:DEVICERECT>";devicecontainer.insertAdjacentHTML("afterBegin", newHTML);
    } 细心的读者一定会发现,LayoutRect 后出现了一个新的属性:LayoutRect:onLayoutComplete ,这个属性主要指定了 LayoutRect 停止响应的后续事件,如系统资源消耗殆尽而停止响应,或者 LayoutRect 指定的变量溢出。好了,有了上面的原理,下面我们来编写具有自动"插入"功能的 JavaScript 代码:function onPageComplete() {
    if (event.contentOverflow) {
    newHTML = "<IE:DEVICERECT ID='devicerect" + (lastPage + 1) + "' MEDIA='print' CLASS='mystyle1'>";
    newHTML += "<IE:LAYOUTRECT ID='layoutrect" + (lastPage + 1) + "' ONLAYOUTCOMPLETE='onPageComplete()' NEXTRECT='layoutrect" + (lastPage + 2) + "' CLASS='contentstyle'/>";
    newHTML += "</IE:DEVICERECT>";devicecontainer.insertAdjacentHTML("beforeEnd", newHTML);
    lastPage++;
    } 在上面的代码中,contentOverflow 代表的是由于页面信息过长,本页的 LayoutRect 停止响应,则直接跳到下一个页面,让 LayoutRect 重新定义下一个页面的版面;onPageComplete() 则不管页面是否过长,LayoutRect 是否停止响应,只要到了页面尾部则自动跳到下一页,这也是最常见的情况。在编写本脚本时,关键处在于保持清醒,不能让任意一个变量出错。其中,ID 不仅针对 DeviceRect 与 LayoutRect ,还为 NextRect 所引用,页面指向不能出错;当前页面的页码应该是 lastPage+1 ,下一个页面的页码应该是 lastPage+2 ;NextRect 标记需要下一个页面的 LayoutRect 属性支持,因此它的值应该为 "layoutRect"+(lastPage+2);打开第一个页面时,这个 LastPage 初始值为 1
    =====================================
    请问有那个高手成功实现过这种打印方式?能否留下联系方法(email or QQ)?
    我目前遇到的问题是,在CONTENTSRC='2.html'"中,无法将2.html的内容加载进去。
    页面显示的只是两个矩形而已。
    欢迎大家一起探讨,我研究了快一个星期了。还是无法实现!
      

  2.   

    各位8要误会啊,原文不是我写的,是我网上找的。
    我自己研究了好长时间也实现不了上面所说的功能,所以才来这里求帮助的。
    http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie55/html/beyondprintpreview.asp
    这是微软里面的介绍,大家可以去看看
      

  3.   

    我看了那个微软的东西,里面感觉像是用C调用的结果。我用IE,没能实现对那个模板HTC调用。你是想用程序调用样式,还是想用IE来调用样式呢?
      

  4.   

    看看
    http://www.webreference.com/js/column95/index.html
    系列教程吧
      

  5.   

    to TXZY(木下藤吉郎) :
    应该是可以在IE实现的吧?我是是想用那种方式来代替目前的利用IE自带的WebBrowser控件实现打印的方式
      

  6.   

    http://www.webreference.com/js/column89/
    http://www.webreference.com/js/column91/
    http://www.webreference.com/js/column92/
    http://www.webreference.com/js/column93/
    http://www.webreference.com/js/column94/
      

  7.   

    to net_lover(孟子E章) 我都看过的了,但里面并没有我想要解决的问题:如果将我要打印的页面加载进去。也就是说我下面那段代码为什么不能将a.htm加载进来
    <HTML>
    <HEAD>
    <?IMPORT NAMESPACE="IE" IMPLEMENTATION="#default">
    <STYLE TYPE="text/css">
    .contentstyle
    {
    width:5.5in;
    height:8in;
    margin:1in;
    background:white;
    border:1 dashed gray;
    }
    </STYLE>
    </HEAD>
    <BODY>
    <IE:LAYOUTRECT ID="layoutrect1" CONTENTSRC="a.htm" CLASS="contentstyle" NEXTRECT="layoutrect2"/><IE:LAYOUTRECT ID="layoutrect2" CLASS="contentstyle"/>
    </BODY>
    </HTML>
      

  8.   

    原文中的一句话
    The most important requirement is that you work in C++. Even though print templates are HTML files, they can only be used from C++ in an application, Microsoft ActiveX&reg; control, binary behavior, or other binary executable file that hosts the WebBrowser control. There is currently no scriptable mechanism for using print templates, nor any mechanism to use them in Microsoft Visual Basic&reg;. 我的理解的意思就是它现阶段只能使用二进制内的文件中。暂时还不能实现IE方式的。
    它只是使用了HTML的模板而已。我的英语不太好。说的不对请大家指正。
      

  9.   

    to net_lover(孟子E章):
       你给的地址中http://www.webreference.com/js/column91/5.html
       这一章节Printing the Document中有下列语句:
    function PrintNow() {
      printer.startDoc("Printing from template2.htm");
      printer.printPage(page1);
      printer.printPage(page2);
      printer.stopDoc();
    }我想请教一下printer对象,是IE的对象吗?请指教!
      

  10.   

    to TXZY(木下藤吉郎)
    <IE:TEMPLATEPRINTER ID="printer"/>
      

  11.   

    to rengs(冷雨):
       <IE:TEMPLATEPRINTER ID="printer"/>
       谢谢   调试成功了吗?
      

  12.   

    没有啊,我放弃了。还是用IE自带的WebBrowser控件来做好了。浪费了我好多时间啊
      

  13.   

    to net_lover(孟子E章):
       你可以做出来吗?给我们一下建议或者例子可以吗?   我们到底错在哪里?
      

  14.   

    原文中的
    function onPageComplete() {
    if (event.contentOverflow) {
    newHTML = "<IE:DEVICERECT ID='devicerect" + (lastPage + 1) + "' MEDIA='print' CLASS='mystyle1'>";
    newHTML += "<IE:LAYOUTRECT ID='layoutrect" + (lastPage + 1) + "' ONLAYOUTCOMPLETE='onPageComplete()' NEXTRECT='layoutrect" + (lastPage + 2) + "' CLASS='contentstyle'/>";
    newHTML += "</IE:DEVICERECT>";devicecontainer.insertAdjacentHTML("beforeEnd", newHTML);
    lastPage++;

    缺少半个“}”,大家觉得应该放在哪里?最后?
      

  15.   

    英文原版http://www.webreference.com/js/column89/7.html
    是放在最后了:
    function onPageComplete() {
      if (event.contentOverflow) {
        document.all("layoutrect" + lastPage).onlayoutcomplete = null;
        newHTML  = "<IE:DEVICERECT ID='devicerect" + (lastPage + 1) +  
                   "' MEDIA='print' CLASS='masterstyle'>";
        newHTML += "<IE:LAYOUTRECT ID='layoutrect" + (lastPage + 1) + 
                   "' ONLAYOUTCOMPLETE='onPageComplete()' NEXTRECT='layoutrect" + 
                   (lastPage + 2) + "'  CLASS='contentstyle'/>";
        newHTML += "</IE:DEVICERECT>";    devicecontainer.insertAdjacentHTML("beforeEnd", newHTML);
        lastPage++;
      }
    }