|
2.8 增强打印功能2.8.1 纵横打印(有些页纵向打印，有些横打)纵横打印(有些页纵向打印，有些横打) 有时，一次打印中需要有些纸张纵向打印，有些纸张横向打印。本来，这些纵横不同的页面，可以分成多个打印任务来实现，但这样，不能保证打印的次序，和页码的连续性，使用本功能，可确保一次打印出纵横不同的页面。如图：
要实现纵横打印，需要设置 myDoc.settings的orientationMixed ，和orientation ： 1. <script> 2. var myDoc = { 3. settings : { 4. 5. orientationMixed : true, // 开启纵横混打模式 6. orientation : 1 // 1为纵向，2为横向 7. }, 8. 9. documents : document, 10. copyrights : '杰创软件拥有版权 www.jatools.com' 11. }; 12. 13. getJCP().print(myDoc); 14. ... 15. </script> 16. <div id='page1'> ...</div> 17. <div id='page2' orientation='2'> ...</div> 18. <div id='page3'> ...</div> 当JCP发现设置了orientationMixed为true ，即进入纵横混合打印模式，在此模式下，JCP会查看page div上的orientation 属性，如果有，就采用该属性上的纸张方向打印，如果没有，会采用 myDoc.settings.orientation上的属性。
orientation取值，可以是 1，或者2，分别表示纵向和横向打印。
本例中的 page1，page2，page3依次按纵向、横向、纵向打印。
2.8.2 打印水印水印示例
JCP支持水印打印，类似上图中的，内部资料，妥善保管。 要实现以上效果，需要设置myDoc.watermark属性，如下所示： 1. var myDoc = { 2. watermark : { 3. image : 'water.jpg', // 水印图片路径 4. opacity : 0.3,// 控制水印图片的透明度，0.0-1之间，数值越小，水印越淡，默认为 0.2 5. repeat : 'no-repeat', /* repeat: 左右上下，重复平铺(默认) 6. repeat-x: 只在水平方向上重复平铺 7. repeat-y: 只在垂直方向上重复平铺 8. no-repeat: 只在页面中间显示一次 9. */ 10. hideWhenPreview : false // 是否预览时隐藏,即打印和预览均可见，true,则只有打印时可见.默认可见. 11. }, 12. documents : document, 13. copyrights : '杰创软件拥有版权 www.jatools.com' 14. } 15. getJCP().print(myDoc);
2.8.3 POS小票打印自动高度,POS机小票打印 POS小票打印时，每次打印的页面高度是变化的，比如，超市小票，如果你购买的东西越多，纸张就越长，也就是纸张高度越高。在JCP中，这种纸张高度随内容变化的情况，只需要设置paperHeight为auto就行了： 1. var myDoc = { 2. settings : { 3. paperWidth : 80, 4. paperHeight : "auto" // 小票打印，高度自动 5. }, 6. 7. documents : document, 8. copyrights : '杰创软件拥有版权 www.jatools.com' 9. }; 10. 11. getJCP().print(myDoc); 12. 当JCP发现paperHeight为auto，则会计算所需要的纸张高度，再结合paperWidth值，并自动创建该大小的纸张。
不同内容高度下的纸张高度：
2.8.4 打印TIFF文件TIFF打印演示 TIFF文件，是一种特殊格式的图片文件，它可以在一个文件中，包含多个图片，主要来源扫描仪、图片处理软件等。TIFF还不能被浏览器支持，所以也不能在浏览器中直接打印TIFF文件。
使用JCP的printTIFF方法，可以打印TIFF文件，方法如下： 1. var myDoc = { 2. tiffStyle : 'height:680px', 3. copyrights : '杰创软件拥有版权 www.jatools.com' // 版权声明必须 4. }; 5. // 调用打印方法 6. if (how == '打印预览...') 7. how = 'printpreview'; 8. else if (how == '打印...') 9. how = 'printprompt'; 10. else 11. how = 'print'; 12. getJCP().printTIFF('tiff.tif', myDoc, how); // 打印前弹出打印设置对话框 printTIFF方法的第一参数，表明tiff文件的所在位置。 第二个参数myDoc与print方法的第一个参数用法上完全一致，你可以在在这里可以设置打印机、纸张等，但不需要设置documents属性，其中只对printTIFF方法有效的属性是 tiffStyle ，表示该图片的样式。
第三个参数，表示打印方式，可以为： printpreview:打印预览 printprompt：显示打印机选择对话框打印 print：直接打印
2.8.5 多语言支持多语言支持 JCP 涉及到界面的地方不多，打印预览算是最主要的一个，针对不同语言背景的用户，你可以用 myDoc.lang 属性设置预览界面的语言类别：
1. function doPrint() { 2. var myDoc = { 3. lang : "en", // 设置为英文预览界面 4. documents : document, 5. copyrights : '杰创软件拥有版权 www.jatools.com' 6. }; 7. 8. getJCP().printPreview(myDoc, false); 9. }
JCP可以支持的语言种类有 中文简体（zh）、中文繁体（zh-tw）、英文（en）、日文（jp）。
你也可以让JCP根据操作系统的语言，自动设置预览界面语言： 1. function doPrint() { 2. var myDoc = { 3. lang : "auto,en", // 根据操作系统语言设置预览语言，如果不在支持之列，则显示英文界面 4. documents : document, 5. copyrights : '杰创软件拥有版权 www.jatools.com' 6. }; 7. 8. getJCP().printPreview(myDoc, false); 9. } 自动选择语言，逗号前必须是固定值 auto，逗号后的值，表示万一操作系统的语言，不在上述四种支持语言之列，则该显示哪种语言，本例是显示成英文。
以下依次为中文简体（zh）、中文繁体（zh-tw）、英文（en）、日文（jp）预览界面 ：
2.9 页眉页脚页眉页脚即是打印在每页上部、下部的内容，JCP允许你在myDoc对象中，设置页眉，页脚，也可以在页眉、页脚中显示当前页号，总页数，当前日期等信息。
2.9.1 设置图文并茂的页眉页脚图文并茂的页脚页眉
要生成如图所示页眉，需要设置如下： 1. <script> 2. function print() { 3. var myDoc = { 4. header : { 5. html : document.getElementById('myheader') // 也可以为字符串类型，如'<span>杰创软件</span>' 6. }, 7. documents : document, 8. copyrights : '杰创软件拥有版权 www.jatools.com' 9. } 10. getJCP().printPreview(myDoc); 11. } 12. </script> 13. 14. <div id='myheader' style='display:none'> 15. <div style="border-bottom: 1px solid black; text-align: right"> 16. <img style="float: left" border="0" src="logojj.gif" width="176" height="53"> 17. <span> 18. <strong>杭州杰创软件有限公司</strong><br> 地址：杭州市西斗门路3号天堂软件园A幢19层A座 邮编：310012<br> 总机：0571-88254255 北京办事处：010-51297501 19. </span> 20. </div> 21. </div> 其中myDoc.header属性是一个Object对象，该对象可以有两个属性： html： 表示页眉上应该显示的html内容，该对象为HTML DOM 对象时，如本例，则取其 innerHTML为页眉内容，如果是字符串，则直接就是页眉内容。 height: 表示该页眉需要占用的高度，以像素为单位，默认以html内容形成的高度。
页脚用 myDoc.footer属性指定，可以有 html和height属性，用法与header类似。 如下所示： 1. var myDoc = { 2. footer : { 3. html : '<div style="text-align: right; border-top: 1px solid black;"><strong> #D #T #p/#P </strong></div>', 4. height:50 5. }, 6. documents : document, 7. copyrights : '杰创软件拥有版权 www.jatools.com' 8. 9. } 10. getJCP().printPreview(myDoc); 效果如下：
页脚中，显示了当前日期及时间，和当前页，总页数。
当JCP发现页眉页脚中，有#号开始的字符，就会从以下表中，找到有没有对应项，如果有，就计算并替换：
2.9.2 在正文中打印页号，总页数等打印总页数 实际上，上例中的#字符替换，也可以出现在打印页面的page div 里，如： page div 的内容：
替换后的效果：
实现正文替换的代码如下： 1. <script> 2. function doPrint() { 3. var myDoc = { 4. evalClass : 'eval-here',/* 5. * 表示正文中，所有带有 jp-eval 6. * 类名的元素，其中有变量引用的地方，则自动替换，类似页脚页眉，变量名可以有: 7. * #p 当前页号 8. * #P 总页数 9. * #d 当前日期，以控制面板/区域与语言选项中设置的短日期格式 10. * #D 当前日期，长日期格式 11. * #t 当前时间，短时间格式 12. * #T 当前时间，长时间格式 13. */ 14. documents : document, 15. copyrights : '杰创软件拥有版权 www.jatools.com' 16. } 17. getJCP().print(myDoc); 18. } 19. </script> 20. ... 21. <div id="page1"> 22. ... 23. 本合同共<span class="eval-here" style="font-size:200%;color:red;">#P</span>页，一式两份，双方各执一份 24. ... 25. </div> 当你定义了myDoc.evalClass属性，JCP就会找出页面中所有带有该属性指出的样式类（本例是 eval-here）的HTML元素，本例是 eval-here 样式类元素，并在页面生成的最后阶段，替换这些html元素上的#字变量。
2.9.3 按每个page div 进行分页编码按每个page div 进行分页编码 设想一下，你有一份销售合同，该合同有一份附件，比如商品清单，你希望正文和附件同时打印，但希望商品清单从1开始分页编码，即类似次序：正文第1页、正文第2页、正文第3页、...、商品清单第1页、商品清单第1页、... 这时，你可以将正文放在page1中，自动分页，将商品清单放在 page2中，自动分页，并且设置myDoc.pageNumberOn 为 'local'，如下所示： 1. <script type="text/javascript"> 2. function doPrint() { 3. var myDoc = { 4. pageNumberOn:"local", 5. footer : { 6. html : "<div> #p/#P</div>" 7. }, 8. documents : document, 9. copyrights : '杰创软件拥有版权 www.jatools.com' 10. }; 11. 12. getJCP().print(myDoc, false); 13. } 14. </script> 15. 16. <div id='page1' class='breakable'> 17. <H1>合同正文</H1> 18. ... 19. </div> 20. <div id='page2' class='breakable'> 21. <H1>商品清单</H1> 22. ... 23. </div>
当 JCP 发现 pageNumberOn值为 local时，会在每一个page div上，重新开始页码编号，即从页码编号上看，互不相关。
假如本例，正文的page div 被分成三页，商品清单被自动分页成两页，则页脚上会依次显示： 1/3 2/3 3/3 1/2 2/2
2.9.4 带封面的页码带封面的页码 有时，文档的第一页（或者开始若干页），是不进行页编码的，即只对正文内容，这时，你可以设置page1 div的类为 header-page，如： 1. <script type="text/javascript"> 2. function doPrint() { 3. var myDoc = { 4. footer : { 5. html : "<div> #p/#P</div>" 6. }, 7. documents : document, 8. copyrights : '杰创软件拥有版权 www.jatools.com' 9. }; 10. 11. getJCP().print(myDoc, false); 12. } 13. </script> 14. ... 15. <div id='page1' class='header-page'> 16. <H1>销售合同 第2018011001号 </H1> 17. </div> 18. <div id='page2' class='breakable'> 19. ... 20. </div> 当JCP 发现 page div有类 header-page时，则不显示页脚、页眉，且不计页号和总页数。
本例第一页，是封面页，不会显示页脚，page2 会显示页脚，从第一页开始编码。
有时，目录页也是不计页码的，这时，你可以将目录页也设置为 header-page，即封面页可以多于一页。如： 1. <div id='page1' class='header-page'> 2. <H1>销售合同 第2018011001号 </H1> 3. </div> 4. <div id='page2' class='header-page'> 5. <H1>目录 </H1> 6. ... 7. </div> 8. <div id='page3' class='breakable'> 9. ... 10. </div>
|
