Primefaces printer.js 有什么作用？

Question

我是 JQuery 和 Primefaces 的新手。

Primefaces 中使用以下代码（printer.js）打印所需的目标<p:printer target="targetId">

我正在尝试打印位于对话框内的 Primefaces 面板的内容，它在 IE8 和其他浏览器中运行良好，但在 IE9 及更高版本中它会抛出错误"Internet Stopped Working"

How can i Fix this issue ? Can any one Explain what Does that printer.js Do ?

printer.js

 (function(b){var a;
                    b.fn.jqprint=function(d){a=b.extend({},b.fn.jqprint.defaults,d);
                    var c=(this instanceof jQuery)?this:b(this);
                        if(a.operaSupport&&b.browser.opera){
                            var e=window.open("","jqPrint-preview");
                                e.document.open();
                                var g=e.document
                        }else{
                            var f=b("<iframe  />");
                            if(!a.debug){
                                f.css({position:"absolute",width:"0px",height:"0px",left:"-600px",top:"-600px"})
                            }
                            f.appendTo("body");
                            var g=f[0].contentWindow.document
                        }
                        if(a.importCSS){
                            if(b("link[media=print]").length>0){
                                b("link[media=print]").each(function(){g.write("<link type='text/css' rel='stylesheet' href='"+b(this).attr("href")+"' media='print' />")})
                            }else{
                                b("link").each(function(){g.write("<link type='text/css' rel='stylesheet' href='"+b(this).attr("href")+"' />")})\
                                }
                        }
                        if(a.printContainer){
                            g.write(c.outer())
                        }else{
                            c.each(function(){g.write(b(this).html())})
                        }g.close();
                        (a.operaSupport&&b.browser.opera?e:f[0].contentWindow).focus();setTimeout(function(){(a.operaSupport&&b.browser.opera?e:f[0].contentWindow).print();if(e){e.close()}},1000)
                    };
                    b.fn.jqprint.defaults={debug:false,importCSS:true,printContainer:true,operaSupport:true};
                    jQuery.fn.outer=function(){return b(b("<div></div>").html(this.clone())).html()}
                })(jQuery);

Answer 1

printer.js 是如何工作的

printer.js 本质上就是这样做的。

• 创建 iframe 并附加到正文（或为歌剧打开新窗口）
• 附加页面的链接样式表（首先检查media=print，否则全部附加所有样式表）
• 将选定对象（或内容取决于传递的选项）附加到 iframe/窗口
• 将焦点设置在窗口上，并调用.print()，它应该告诉浏览器打印该“文档”，在这种情况下是 iframe/窗口的内容

所以对于PrimeFace's website中的演示，

代码

<p:commandButton value="Print" type="button">
    <p:printer target="image" />
</p:commandButton>

<p:graphicImage id="image" name="demo/images/nature/nature10.jpg" />

将创建附加到结果“按钮”的内联代码

PrimeFaces.expressions.SearchExpressionFacade
  .resolveComponentsAsSelector('image') //resolves to $(document.getElementById())
  .jqprint();
return false;

为了完整起见，我评论了printer.js源代码

var options;
$.fn.jqprint.defaults = {
    debug: false,
    importCSS: true,
    printContainer: true,
    operaSupport: true
};
jQuery.fn.outer = function () {
    return $($("<div></div>").html(this.clone())).html()
}

$.fn.jqprint = function (passedOptions) {
 //make options from passedOptions and default options
 options = $.extend({}, $.fn.jqprint.defaults, passedOptions);

 //get a jQuery object of the objects to be printed. in this case #image.
 var objects_to_be_printed = (this instanceof jQuery) ? this : $(this);

 //create window or iframe and get the document obj
 if (options.operaSupport && $.browser.opera) {
     var open_window = window.open("", "jqPrint-preview");
     open_window=document.open();
     var document_obj = open_window.document
 } else {
     var iframe= $("<iframe  />");
     if (!options.debug) {
         iframe.css({
             position: "absolute",
             width: "0px",
             height: "0px",
             left: "-600px",
             top: "-600px"
         })
     }
     iframe.appendTo("body");
     var document_obj = iframe[0].contentWindow.document
 }

 //append document's CSS to frame/window
 if (options.importCSS) {
     if ($("link[media=print]").length > 0) {
         $("link[media=print]").each(function () {
             document_obj
               .write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />")
         })
     } else {
         $("link").each(function () {
             document_obj
               .write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />")
         })
     }
 }

 //appaned selected objects into frame/window
 if (options.printContainer) {
     document_obj.write(objects_to_be_printed.outer())
 } else {
     objects_to_be_printed.each(function () {
         document_obj.write($(this).html())
     })
 }
 document_obj.close(); //close document stream and render data

 //focus on new frame/window
 (options.operaSupport && $.browser.opera ? open_window : iframe[0].contentWindow).focus();

 //wait for 1second before opening printing page
 setTimeout(function () {
     (options.operaSupport && $.browser.opera ? open_window : iframe[0].contentWindow).print();
     if (open_window) {
         open_window.close() //close window if window was used
     }
 }, 1000)
};

---

是什么导致 IE9 失败？

老实说，在这种情况下，我不太确定。我认为，在这种情况下，只是 IE 处理 window.print() 的方式不同。所以搜索“window.print()ie9”应该比“printer.jsie9”更有成效。 This stackoverflow questions 似乎有很多我们可以尝试的选择。

我没有方便测试的 windows 机器，但是例如，在这个 highly upvoted answer 之后，opera 代码似乎是最兼容的（但也许正如其评论中所述，iframe 是首选，因为某些浏览器可能认为它可能是一个弹出窗口）。在这种情况下，也许修改printer.js 并将|| $.browser.msie 添加到options.operaSupport && $.browser.opera 的每个实例可能会有所帮助。可能是一个 hack，但由于它已经在使用浏览器检测，所以也可以使用它。所以它看起来像

 if( options.operaSupport && $.browser.opera || $.browser.msie ) {
 ...
 (options.operaSupport && $.browser.opera || $.browser.msie 
     ? open_window : iframe[0].contentWindow).focus();
 ...
 (options.operaSupport && $.browser.opera || $.browser.msie 
     ? open_window : iframe[0].contentWindow).print();

希望对您有所帮助。