码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-18 12:48:53      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:样式   tin   innerhtml   int()   setup   dcl   dialog   debug   deb   

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

 

欢迎小伙伴们前来挑刺

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

标签:样式   tin   innerhtml   int()   setup   dcl   dialog   debug   deb   

原文地址:https://www.cnblogs.com/PotatosMe/p/12058977.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!