js网页打印

window.print();打印会出现图片不在打印预览显示，不打印的问题，需要用 jqprint 插件

jquery.jqprint-0.3.js　　　　https://www.jq22.com/jquery-info347　　　　要在jq之后引用
2009年版本会有兼容性问题，之前加一段
预览的页面字号不起作用了，需要在jqprint中写入
如果页面有横向滚动而打印时不想显示滚动条，需要在jqprint中写入

jQuery.browser={};
(function(){
    jQuery.browser.msie=false;
    jQuery.browser.version=0;
    if(navigator.userAgent.match(/MSIE ([0-9]+)./)){
        jQuery.browser.msie=true;
        jQuery.browser.version=RegExp.$1;
    }
})();
(function($) {
    var opt;

    $.fn.jqprint = function (options) {
        opt = $.extend({}, $.fn.jqprint.defaults, options);
        var $element = (this instanceof jQuery) ? this : $(this);
        if (opt.operaSupport && $.browser.opera) 
        { 
            var tab = window.open("","jqPrint-preview");
            tab.document.open();
            var doc = tab.document;
        }
        else 
        {
            var $iframe = $("<iframe  />");        
            if (!opt.debug) { $iframe.css({ position: "absolute",  "0px", height: "0px", left: "-600px", top: "-600px" }); }
            $iframe.appendTo("body");
            var doc = $iframe[0].contentWindow.document;
        }        
        if (opt.importCSS)
        {
            if ($("link[media=print]").length > 0) 
            {
                $("link[media=print]").each( function() {
                    doc.write("<link rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");
                });
            }
            else 
            {
                //加载页面引用的样式表
                $("link").each( function() {
                    doc.write("<link href='" + $(this).attr("href") + "' rel='stylesheet' />");
                });
                doc.write("<style type='text/css'>td,th { font-size: 13px; }</style>");
            }
        }
        //console.log(doc);
        if (opt.printContainer) { doc.write($element.outer()); }
        else { $element.each( function() { doc.write($(this).html()); }); }
        
        doc.close();
        //培训详情弹开打印预览立即恢复学习照片滚动效果
        if($("#tdwid")[0] != undefined){
            var tdwid = $("#tdwid")[0].clientWidth - 10;
            $("#divwid").css({'width':tdwid+'px','overflow-x':'auto'});
        };
        if($("#tdwid1")[0] != undefined){
            var tdwid1 = $("#tdwid1")[0].clientWidth - 10;
            $("#divwid1").css({'width':tdwid1+'px','overflow-x':'auto'});
        };
        (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus();
        setTimeout( function() { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000);
    }
    
    $.fn.jqprint.defaults = {
        debug: false,
        importCSS: true, 
        printContainer: true,
        operaSupport: true
    };

    // Thanks to 9__, found at http://users.livejournal.com/9__/380664.html
    jQuery.fn.outer = function() {
      return $($('<div></div>').html(this.clone())).html();
    } 
})(jQuery);

打印带有背景色效果的需要加样式

/*打印背景色*/
@media all {
    .dybg {
        background-color: #eeeeee !important;
        -webkit-print-color-adjust:exact;
        -moz-print-color-adjust:exact;
        -ms-print-color-adjust:exact;
        print-color-adjust:exact;
    }
    .trrbg {
        background-color: #ffe5e3 !important;
        -webkit-print-color-adjust:exact;
        -moz-print-color-adjust:exact;
        -ms-print-color-adjust:exact;
        print-color-adjust:exact;
    }
}

另外，如果横向滚动容器宽度不确定，需要通过js计算赋值，在获取渲染时，填充完列表立即更改宽度，在点击打印预览时修改宽度，在jqprint实例创建完后再改回原来效果

//拼好字符串，立即计算容器宽度
var tdwid = $("#tdwid")[0].clientWidth - 10;
$("#divwid").css('width',tdwid+'px');



function TPD_dodoPrint(){
    //打印预览立即更改宽度并隐藏横向滚动条
    $("#divwid").css({'width':'700px','overflow-x':'hidden'});
    //$("#divwid1").css({'width':'700px','overflow-x':'hidden'});
    $("#TPD_print-area").jqprint({
        debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
        importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
        printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
        operaSupport: true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
    });
}