1. 程式人生 > 其它 >js網頁列印

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", width: "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
    });
}