针式打印机打印 分页及第二页带表头
时间:2019-12-18
本文章向大家介绍针式打印机打印 分页及第二页带表头,主要包括针式打印机打印 分页及第二页带表头使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
这片随笔是为了记录一下最近开发的过程中遇到的一个问题 针式打印机打印的时候问题 针式打印机纸张是链式的 那么我们的要求是要分页 每个分页要带头部 刚开始做的时候直接用的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;
}
欢迎小伙伴们前来挑刺
原文地址:https://www.cnblogs.com/PotatosMe/p/12058977.html
- 系统架构 | 基于微服务架构,改造企业核心系统之实践
- 《Redis设计与实现》读书笔记(五) ——Redis中的整数集合
- 《Redis设计与实现》读书笔记(七) ——Redis对象综述及字符串对象实现原理
- 自动登录脚本
- 极致之处,精彩无限 - 优化了一半的SQL
- 编程修炼 | Scala中Stream的应用场景及其实现原理
- Linux之内存描述符mm_struct
- 大数据 | Spark的现状与未来发展
- 信号量、互斥锁、自旋锁、原子操作
- 理解OAuth 2.0
- node.js应用Redis数据库
- apache服务器配置
- udev实现热插拔
- 《Redis设计与实现》读书笔记(九) ——Redis集合和有序集合实现原理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Vue监听文本框实时输入限制输入长度
- 30 分钟轻松搞定正则表达式基础
- Vant引入CDN实现图片懒加载
- Js时间戳倒计时天时分秒
- 微信小程序引用we-cropper裁切图片
- NodeJs获取get/post传值
- Mybatis源码本地化构建Demo
- NodeJs封装静态web服务器、路由、读取文件获取响应类型
- NodeJs使用ejs模板引擎实现后端渲染
- 如何优雅地本地化构建Mybatis源码
- Vue监听返回键关闭弹出层不返回页面
- Css添加div点击态
- Mybatis源码笔记之浅析ParameterHandler
- SpringBoot总结之浅析自动化配置原理
- Vue用keep-alive实现页面缓存