针式打印机打印 分页及第二页带表头

Posted 2021-03-22 potatosme

这片随笔是为了记录一下最近开发的过程中遇到的一个问题   针式打印机打印的时候问题   针式打印机纸张是链式的    那么我们的要求是要分页   每个分页要带头部    刚开始做的时候直接用的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">
‘ +
                ‘       <table class="table table-striped table-bordered table-hover PrintTable" style="margin-bottom: 0;">
‘ +
                            Printthead + strTbody + printTfoot +
                ‘        </table>
‘ +
                ‘     </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="SoftwareMicrosoftInternet ExplorerPageSetup";
    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;
}

 

欢迎小伙伴们前来挑刺