2       网页打印

网页打印是JCP的最主要功能，JCP收费版的其他功能，如PDF打印、Office打印等，也是在这个功能的启发下，慢慢发展出来的。

 

使用JCP进行网页打印，离不开两个核心方法：print方法用来打印，printPreview方法用来打印预览。

 

JCP打印网页时，你可以进行各种控制，比如，你可以在print方法参数中，设置打印到哪个打印机、纸张、份数等。

 

提示：

你可以使用两种方法，来控制JCP的网页打印：print方法参数和控制样式类。

 

2.1        基本打印设置

本节介绍如何用 print方法参数来进行打印控制。

2.1.1    打印预览、直接打印、选择打印机打印

打印预览、选择打印机打印、直接打印

调用浏览器自带的打印方法，window.print，很难做到所谓的静默打印，即不弹打印机选择框进行打印，而JCP可以，当然弹框打印也可以：

 

1.  function doPrint(how) {  

2.    

3.      var myDoc = {  

4.          documents : document,   

5.          copyrights : '杰创软件拥有版权  www.jatools.com'   

6.      var jcp = getJCP();  

7.        

8.      if (how == '打印预览')  

9.          jcp.printPreview(myDoc, false);  

10.     else if (how == "打印预览(显示进度条)") {  

11.         jcp.printPreview(myDoc, true);  

12.     } else if (how == '弹出打印机选择对话框打印') {  

13.         jcp.print(myDoc, true);  

14.     } else  

15.         jcp.print(myDoc, false); // 不弹出对话框打印  

16.   

17. }  

 

从示例可见，JCP的打印及打印预览，使用的是print，printPreview两个方法。

 

print方法的第一个参数myDoc，用来设置打印参数，比如设置输出打印机、纸张类型、边距等，其中必选的两个属性是documents和copyrights，documents表示打印来源内容，如果打印内容为本页面中ID为page1，page2...的div，则设置为document。copyrights为定值，必须设置为示例所示值。

 

print的第二个参数表示打印前是否显示打印机选择对话框。

 

printPreview方法的第一个参数myDoc，作用与print方法一样，第二个参数表示是否显示页面生成进度条，当有大数据量的自动分页时，建议显示这个进度条，提示用户等待。

 

两个方法都没有返回值，如果想知道打印是否完成，可以在myDoc中，设置done回调函数。

 

限制：本版本不支持 done 回调

 

2.1.2    选择打印机打印  

选择打印机打印

在JCP中，选择打印机打印有两种方法，第一种即上节示例所示，调用 jcp.print(myDoc,true) 方法，那么，JCP在打印前，会弹出系统的打印机选择对话框，由用户选择后，再进行打印。

 

第二种方法，是利用JCP的getPrinters方法，检索出系统安装的打印机，用js填充到页面的<select>元素中，如：

1.  <script>  

2.  function loadPrinters() {  

3.      // 取得系统安装的打印机  

4.      getJCP().getPrinters(function(printers) {  

5.                  // printers是取到的打印机列表，是一个字符串数组，每个元素表示一个打印机的名称  

6.                  var printerlist = document.getElementById('printer-list');  

7.                  // 填充到一个select中  

8.                  for (i = 0; i < printers.length; i++)  

9.                      printerlist.options[i + 1] = new Option(printers[i], printers[i]);  

10.                 printerlist.options[0].selected = true;  

11.             })  

12. }  

13. function doPrint() {  

14.     var printer = document.getElementById('printer-list').value;  

15.     var myDoc = {  

16.         settings : {  

17.             // 设置要输出的打印机  

18.             printer : printer  

19.         },  

20.         documents : document,  

21.         copyrights : '杰创软件拥有版权  www.jatools.com'  

22.     };  

23.     jcp.print(myDoc, false); // 不弹出对话框打印  

24. }  

25. <script>  

26. ...  

27. <body onload="loadPrinters()">  

28.    ...  

29.    <select id="printer-list"></select>  

30.     ...          

 

一般在文档加载完成时调用 JCP的getPrinters方法，当用户打印时，只需要将用户选择的打印机名称，设置到myDoc.settings.printer属性，即可将打印内容打印到该打印机。

 

如果不设置 printer属性， JCP将打印到默认打印机。

 

限制：本版本 getPrinters 方法仅能取得默认打印机

 

提示：

利用 getPrinters方法，使用户可以在<select>中选择输出打印机，同时，可以使用js的cookie方法，将用户最后一次选择的打印机，记录在cookie中，在下次打印时用js自动从cookie中取得上次使用的的打印机，设置到 <select>默认选项中，这种方法让可以让用户，免去每次选择打印机的麻烦。

 

 

2.1.3    选择纸张类型、方向、页边距

选择纸张类型打印、方向、页边距

当你调用JCP的print(打印)，和printPreview(打印预览)方法时，你可以在myDoc.settings属性中设置，要打印机纸张类型、方向、页边距，如：

 

1.  var myDoc = {  

2.      settings : {  

3.          paperName : "A4", // 纸张名称  

4.          portrait : true, // 纵向  

5.          marginLeft : 5, //设置左边距，单位为mm  

6.          marginTop : 5,  

7.          marginRight : 5,  

8.          marginBottom : 5  

9.    

10.     },  

11.     documents : document,  

12.     copyrights : '杰创软件拥有版权  www.jatools.com'  

13. };  

14. getJCP().print(myDoc);  

 

paperName：要使用的纸张名称；

portrait: true为纵向打印，false为横向打印；

marginLeft，marginTop，marginRight，marginBottom：指定左、上、右、下边距，单位为mm，可以带1位小数点，默认为打印机的默认边距；

 

paperName是指当前打印机可用纸张，否则无效，比如，在一个不支持A4纸张的打印机上，指定A4，则无效，在此情况下，JCP使用打印机的默认纸张。

 

如果你想取得某一台打印机的可用纸张，可以调用 getPapers方法，如下：

1.  // 取得 <select>元素，用来放置可用纸张列表  

2.  var paperlist = document.getElementById("papers");  

3.  // 取得虚拟打印机的可用纸张，  

4.  getJCP().getPapers("Microsoft XPS Document Writer", function(papers) {  

5.              for (i = 0; i < papers.length; i++)  

6.              // 将纸张名称，填充到<select> 中  

7.                  paperlist.options[i + 1] = new Option(papers[i].name, papers[i].name);   

8.          });  

getPapers返回的是一个 Object对象数组，其中name属性是纸张名称。

 

限制：本版本getPapers仅能取得默认打印机的可用纸张

提示：

某些打印机不能紧贴纸张边缘打印，这时，你不能把边距设得太小了，太小了会不起作用。

2.1.4    打印份数控制

设置打印份数

可以用 myDoc.settings.copies 属性，指定打印份数：

1.  var myDoc = {  

2.      settings : {  

3.          copies : 3, // 打印三份  

4.          collate : true  // 逐份打印，即以 1,2,3,...,1,2,3,... ,1,2,3,... 顺序打印  

5.      },  

6.      documents : document,  

7.      copyrights : '杰创软件拥有版权  www.jatools.com'  

8.  };  

9.  getJCP().print(myDoc);  

可以用collate指定打印顺序：

true，逐份打印，即1，2，3，...，1，2，3，... ，1，2，3，...

false，为逐页打印，即1，1，1，2，2，2，3，3，3，...

 

2.1.5    打印指定页

指定打印页

可以用 myDoc.settings 的pageFrom 和pageTo属性，指定要打印的页面，如：

1.  var myDoc = {  

2.      settings : {  

3.          pageFrom : 2,  

4.          pageTo : 3  

5.      },  

6.      documents : document,  

7.      copyrights : '杰创软件拥有版权  www.jatools.com'  

8.  };  

9.  getJCP().print(myDoc);  

 

以上打印第2，3两页。

2.2        打印页面来源设置

JCP可以打印本页面中的内容，以及URL上的内容、iframe上的内容等，本节介绍如何用print/printPreview参数属性 myDoc.documents 来控制打印内容。

 

打印本页面中的内容，在《JCP快速入门》和上节中都有提及，在此不再赘述。

 

限制：本版本不能打印 URL上的内容

 

 

2.2.1    打印图片

打印图片

打印图片的代码如下：

1.  <script>  

2.  function doPrint(how) {  

3.      var myDoc = {  

4.          documents : document,  

5.          copyrights : '杰创软件拥有版权  www.jatools.com'  

6.      };  

7.      var jcp = getJCP(), printPreview(myDoc);  

8.  }  

9.  <script>  

10. <div id='page1'><img src="/images/logo.png"></div>  

在JCP中打印图片，非常重要的一点是，服务端返回图片时，不要依赖任何session信息，原因是，JCP打印引擎根据 <img> 的src，向服务端请求图片时，不会向服务端发送任何session信息。

 

如果你的图片需要session信息才能成功返回图片，那么，JCP预览窗口中将看不到图片，当然，打印出来也是空白的。

 

避免使用 session 的方法，是用 <img> 的 src 上加url 参数代替session信息， 如果你想安全些，参数可加密，甚至将图片的有效请求限制在一定的时间内。

 

提示：

    有些服务端的图片，被设置成登录才能访问，同样属于这种有session才能访问的情况，也会打印不出图片，这时，你需要将该图片放开，设置成不登录也能访问。

 

2.2.2    打印隐藏对象

打印预览一个隐藏的文档

有时，打印内容已经在当前文档document中，你可以将它们设置到一个隐藏的容器中，仍然可以用JCP打印出来：

1.  var myDoc = {  

2.      documents : document,  

3.      copyrights : '杰创软件拥有版权  www.jatools.com'  

4.  };  

5.  getJCP().print(myDoc);  

6.  ...  

7.  <div style="display:none">  

8.          <div id='page1'>第一页(div#page1)</div>  

9.          <div id='page2'>第二页(div#page2)</div>  

10.         <div id='page3'>第三页(div#page3)</div>  

11.         <div id='page4'>第四页(div#page4)</div>  

12.         <div id='page5'>第五页(div#page5)</div>  

13.         <div id='page6'>第六页(div#page6)</div>  

14. </div>  

15. ...    

注意：

    不要将display:none，设置到page div上，这样会出现打印出空白页的情况。

 

2.2.3    打印<iframe>的页面

打印<iframe>的页面

你可以打印iframe中的内容，只要该iframe里面包含page1，page2，...这样的打印div页面：

1.  <script>  

2.  ...  

3.  var myDoc = {  

4.              // 打印一个iframe里面的页面，该iframe 的 id为myframe  

5.              documents : document.getElementById("myframe").contentWindow.document,  

6.              copyrights : '杰创软件拥有版权  www.jatools.com'  

7.          };  

8.  getJCP().print(myDoc);  

9.  </script>  

10. ...  

11. <iframe id='myframe' src='pages.htm'></iframe>  

12. ...  

可以用类似 document.getElementById("IFRAMEID").contentWindow.document 这样的形式，取得iframe里的document对象。

 

注意，打印iframe前，应该确保其已经加载完成，所以，如果你需要动态指定iframe的src属性时，应该在文档加载完成后，再调用JCP进行打印，如：

1.  function main() {  

2.      // 加载完成后，再打印  

3.      loadFrame("getpages.jsp", doPrint);  

4.  }  

5.  function doPrint() {  

6.      var myDoc = {  

7.          documents : document.getElementById("myframe").contentWindow.document,  

8.          copyrights : '杰创软件拥有版权  www.jatools.com'  

9.      };  

10.     getJCP().print(myDoc);  

11. }  

12. function loadFrame(src, callback) {  

13.     // 加载完成后，回调 callback  

14.     var loaded = function() {  

15.         callback();  

16.     }  

17.     var frame = document.getElementById("myframe");  

18.     if (frame.attachEvent) {  

19.         frame.attachEvent("onload", loaded);  

20.     } else {  

21.         frame.onload = loaded;  

22.     }  

23.     frame.src = src;  

24. }