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 }); }