針式打印機打印 分頁及第二頁帶表頭

這片隨筆是為了記錄一下最近開發的過程中遇到的一個問題   針式打印機打印的時候問題   針式打印機紙張是鏈式的    那么我們的要求是要分頁   每個分頁要帶頭部    剛開始做的時候直接用的windows.print()  

但是存在問題, 分頁的時候只能帶上表格的thead ,但是問題是以下是我的表格中的三個表頭內容不一樣高度不一樣,所以我得自己分頁,自己加表頭,有人說可以用插件呀,插件不是得安裝么,說明問題后上我的代碼, 這個隨筆也是給我自己記錄一下, 歡迎同問題參考

上代碼   代碼很詳細  也有備注 ,分頁的算法比較簡單,主要是打印出來的效果,不同瀏覽器顯示形式不同,內部有不同瀏覽器的處理方法,主要原因是字體大小引起的,廢話不多說 ,代碼附上

//打印
function preview(obj) {
    //表頭
    var printHtmlOld =window.document.body.innerHTML;
    // 增加打印div樣式
    $(obj).parents('.printContent').find('.purchasingTaskCheck').addClass('PrintDiv');
    // 復制整個打印區域的html
    var printHtml = $(obj).parents('.printContent').html();
    // 初始化elem
    var elem=$(obj).parents('.printContent');
    // 頭部前兩行文本
    var headtable = '<div class="center" id="headprint" style="padding-bottom: 0px;">'+elem.find('.headprint').html()+'</div>';
    var ishavahead = elem.find('.ishavahead').html();
    //獲取高度  獲取表頭兩個 （分開的原因是每個頁面排版和內容不同）    獲取高度是為了計算分頁
    var headprintH=elem.find('.headprint').height();
    var ishavaheadH=elem.find('.ishavahead').height();
    // $('table.printTable').css('width','770px');
    //$('table.printTable td').css({'font-size':'9px','padding':'3px'});
    //新建一個div 然后復制一個table 追加到div里  div和table都是隱藏的
    var insertDiv=$(obj).parents('.printContent').find('.purchasingTaskCheck');
    var cloneDiv='<div id="cloneBlock"><table class="table table-striped table-bordered table-hover PrintTable"></table></div>';
    insertDiv.append(cloneDiv)
    var cloneElem=insertDiv.find('table').html();
    $('#cloneBlock table').append(cloneElem);
    $('#cloneBlock table tbody').removeAttr('id');
    $('#cloneBlock table').css('width','770px');
    $('#cloneBlock table tr td').css("font-size","9px");
    $('#cloneBlock table tr td').css("padding","3px");


    getBrowser("n");
    var explorer = window.navigator.userAgent.toLowerCase();
    var newNode='<tr style="break-after: page;"></tr>';
    debugger
    if (explorer.indexOf("firefox") >= 0) {
        $('th,td').css('font-size', '9px');
        $('#cloneBlock table').css('width', '735px');
    }else if (explorer.indexOf("chrome") >= 0) {
        $('#cloneBlock table').css('width','770px');
        $('th,td').css('font-size','9px');
        $('#cloneBlock table tr td').css("padding","3px");
        if (explorer.indexOf("edge") >= 0) {
            $('#cloneBlock table').css('width','770px');
            $('th,td').css('font-size','9px');
        }
        var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
        if(is360){
            $('#cloneBlock table').css('width','700px');
            $('th,td').css('font-size','7px');
        }
    }else if (explorer.indexOf("msie") >= 0) {  //ie 10 9 8 能檢測到
        $('#cloneBlock table').css('width','770px');
        $('th,td').css('font-size','12px');
        if(chkIE()==8){
            newNode='!niubiplus!';
            $('th,td').css('font-size','9px');
        }
        console.log($('#cloneBlock table tr td').css("font-size")+'===========')
    }
    if(isIE()){
        if(isIE11()){
            $('#cloneBlock table').css('width','750px');
            $('th,td').css('font-size','10px');
        }
    }


    //表tfoot 的高
   var tfootH=$('#cloneBlock table tfoot').height();
   var theadH=$('#cloneBlock table thead').height();
    // 獲取第二個頭部數據
    var trPage = ''
    var headHeight=headprintH+ishavaheadH+tfootH+theadH;
    var pageHeigth=460;
    var contentHeigth=0;
    // 所有行數循環
    var tbodyhtml = "";
    for (var i = 0; 1==1; i++) {
        var contentList=$('#cloneBlock table tbody tr');

        if(contentList.length==0){
            break;
        }
        for(var o = 0; o<contentList.length; o++ ){
            contentHeigth+=contentList[o].offsetHeight;
            if(headHeight+contentHeigth>pageHeigth){

                tbodyhtml = tbodyhtml+newNode;
                contentHeigth=0;
                // 分頁完成后刪除所有已循環的頁面內容
                for(var q = 0; q < o;q++){
                    // 刪除
                    $('#cloneBlock table tbody tr').eq(0).remove();
                }
                break;
            }else if((o+1)==contentList.length){
                tbodyhtml += '<tr>'+contentList[o].innerHTML+'</tr>';
                for(var c = 0; c < o+1;c++){
                    // 刪除
                    $('#cloneBlock table tbody tr').eq(0).remove();
                }
                break;
            }else{
                tbodyhtml += '<tr>'+contentList[o].innerHTML+'</tr>';
            }

        }
    }
    tbodyhtml='<tbody>'+tbodyhtml+'</tbody>';

    /*判斷如果有分頁*/

    if(tbodyhtml!=''){
        var PrintTable = elem.find('.PrintTable').html();
        $(PrintTable).find('tbody').empty();
        printHtml='';
        trPage = $(tbodyhtml).html().split('<tr style="break-after: page;"></tr>');
        if (explorer.indexOf("msie") >= 0 && chkIE()==8) {  //ie 10 9 8 能檢測到
            trPage = $(tbodyhtml).html().split('!niubiplus!');
        }

        for (var i = 0; i < trPage.length; i++) {

            var strTbody = '<tbody>' + trPage[i] + '</tbody>';
            var Printthead = '<thead>' + $('#cloneBlock table thead').html() + '</thead>';
            var printTfoot = '<tfoot>' + $('#cloneBlock table tfoot').html() + '</tfoot>';

            var str = '<div class="generate">\n' +
                '       <table class="table table-striped table-bordered table-hover PrintTable" style="margin-bottom: 0;">\n' +
                            Printthead + strTbody + printTfoot +
                '        </table>\n' +
                '     </div>';

            var onepageHtml ='<div style="page-break-after:always;"><div class="main-content printContent">' +
                '   <div class="purchasingTaskCheck PrintDiv" >' +
                '       <div >'+ headtable + ishavahead + str+'</div>' +
                '   </div></div></div>';

            printHtml += onepageHtml;
        }

    }
    window.document.body.innerHTML = printHtml;
    /**=====================*/
    var neihe = getBrowser("n");
    debugger
    var explorer = window.navigator.userAgent.toLowerCase();
    if (explorer.indexOf("msie") >= 0) {  //ie 10 9 8 能檢測到
        debugger
        $('.PrintDiv,.paddTopBom,.PrintDiv .headprint,.PrintDiv .ishavahead').css("width",'620px');
        $('.PrintDiv table').css('width','620px');
        $('th,td').css('font-size','10px');
    }
    //firefox
    else if (explorer.indexOf("firefox") >= 0) {
        $('.PrintDiv table').css('width','735px');
        $('.PrintDiv,.paddTopBom,.PrintDiv .headprint,.PrintDiv .ishavahead').css("width",'735px');
        $('th,td').css('font-size', '10px');
    }
//Chrome
    else if (explorer.indexOf("chrome") >= 0) {
        $('.PrintDiv,.paddTopBom,.PrintDiv .headprint,.PrintDiv .ishavahead').css("width",'750px');
        $('.PrintDiv table').css('width','750px');
        $('th,td').css('font-size','9px');
        var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
        if(is360){
            $('.PrintDiv,.paddTopBom,.PrintDiv .headprint,.PrintDiv .ishavahead').css("width",'750px');
            $('.PrintDiv table').css('width','750px');
            $('th,td').css('font-size','9px');
        }
        if (explorer.indexOf("edge") >= 0) {
            $('#cloneBlock table').css('width','770px');
            $('th,td').css('font-size','10px');

        }
    }
    //ie
    if(isIE()){
        if(isIE11()){
            $('.PrintDiv,.paddTopBom,.PrintDiv .headprint,.PrintDiv .ishavahead').css("width",'620px');
            $('.PrintDiv table').css('width','620px');
            $('th,td').css('font-size','10px');
        }
        setup_null();
    }
    setup_null();
    window.print();
    window.document.body.innerHTML = printHtmlOld;
}

function setup_null() {
    var HKEY_Root,HKEY_Path,HKEY_Key;
    HKEY_Root="HKEY_CURRENT_USER";
    HKEY_Path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
    try
    {
        var Wsh=new ActiveXObject("WScript.Shell");
        HKEY_Key="header";
        Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");
        HKEY_Key="footer";
        Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"");
    }
    catch(e)
    {}
}

function getBrowser(n) {
    var ua = window.navigator.userAgent,
        s,
        name = '',
        ver = 0;
    //探測瀏覽器
    (s = ua.match(/msie ([\d.]+)/)) ? _set("ie", _toFixedVersion(s[1])):
        (s = ua.match(/edge\/([\d.]+)/)) ? _set("edge", _toFixedVersion(s[1])):
            (s = ua.match(/firefox\/([\d.]+)/)) ? _set("firefox", _toFixedVersion(s[1])) :
                (s = ua.match(/chrome\/([\d.]+)/)) ? _set("chrome", _toFixedVersion(s[1])) :
                    (s = ua.match(/opera.([\d.]+)/)) ? _set("opera", _toFixedVersion(s[1])) :
                        (s = ua.match(/version\/([\d.]+).*safari/)) ? _set("safari", _toFixedVersion(s[1])) : 0;

    function _toFixedVersion(ver, floatLength) {
        ver = ('' + ver).replace(/_/g, '.');
        floatLength = floatLength || 1;
        ver = String(ver).split('.');
        ver = ver[0] + '.' + (ver[1] || '0');
        ver = Number(ver).toFixed(floatLength);
        return ver;
    }

    function _set(bname, bver) {
        name = bname;
        ver = bver;
    }
    return (n == 'n' ? name : (n == 'v' ? ver : name + ver));
}

function chkIE(){
    if(isIE()){
        return parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""));
    }
}

function isIE() {
    if (window.showModalDialog) {
        return true;
    }
    return false;
}
function isIE11(){
    var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    if(isIE11){
        return true;
    }
    return false;
}

function _mime(option, value) {
    var mimeTypes = navigator.mimeTypes;
    for (var mt in mimeTypes) {
        if (mimeTypes[mt][option] == value) {
            return true;
        }
    }
    return false;
}

 

歡迎小伙伴們前來挑刺