这片随笔是为了记录一下最近开发的过程中遇到的一个问题   针式打印机打印的时候问题   针式打印机纸张是链式的    那么我们的要求是要分页   每个分页要带头部    刚开始做的时候直接用的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;
}

欢迎小伙伴们前来挑刺