纯前端js打印页面，打印表格边框可调节可记忆

最新推荐文章于 2024-08-01 15:06:06 发布

爪哇Bubble

最新推荐文章于 2024-08-01 15:06:06 发布

阅读量1.2k

点赞数 2

分类专栏：前端页面调整方法文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_43238452/article/details/117767243

版权

前端页面调整方法专栏收录该内容

3 篇文章 0 订阅

订阅专栏

打印效果不理想？格式调整太麻烦？表格宽度可随意变化的纯js打印，他来了！
在线打印的功能屡见不鲜，有的使用外部插件一劳永逸，有的转成word画蛇添足，还有的因为打印与页面显示格式不符而焦头烂额！今天，你看了这篇文章所有问题都会迎刃而解！欢迎各位大佬一键三连，或献上宝贵意见！
话不多说上代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>原生js打印 演示</title>
  <meta name="author" content="DH">
  <link rel="stylesheet" href="files/comm.css" />
  <link rel="stylesheet" href="files/bootstrap.min.css">
  <style>
    .wrap {
      margin: 0 auto;
      padding: 20px;
    }
    .form .row {
      padding: 10px 0 0;
    }
    .btn {
      display: block;
      margin: 20px auto;
      padding: 8px 16px;
    }
	html,body{
    margin: 0;
    padding: 0;
	}
	body{
		font-size: 14px;
		color: #333;
	}
	@media print {
		body{-webkit-print-color-adjust:exact;} 
	}
	@page{
	margin:0
	}
	.fr{
		t:center;
	}
	.vt{
		vertical-align: top;
	}
	#summaryContent tr td{
		border:1px solid #000;
	}
	span{
		margin-right:0%;
		font-size: 16px;
		font-weight:400;
	}
  ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
	}
	ul.pagination li {display: inline;}
	ul.pagination li a {
		color: black;
		float: left;
		padding: 8px 16px;
		text-decoration: none;
		transition: background-color .3s;
		border: 1px solid #000;
	}
	ul.pagination li a.active {
		background-color: #EFEFEF;
		color: black;
		border: 1px solid #000;
	}
	ul.pagination li a:hover:not(.active) {background-color: #ddd;}
  </style>
</head>
<body>
<div id="wrap" class="wrap">
	<table style="text-align: center;">
		  <tr >
			<th style="text-align: center;"><img  src="files/img.png" width="50%"/></th>
		  </tr>
		  <tr>
			<td><h3 style="margin-left:0%;text-decoration:underline">物 资 入 库 单</h3></td>
		  </tr>
	</table>
	<div class="container">
		<div class="row">
			<div class="col-md-12" style="padding:0 0 0 0;">
			  <div class="table-responsive">
				<table style="width:100%">
					 <thead>
						<tr>
							<td><span id="depPurpose"></span></td>
							<td style="text-align:left"><span id="workshopPurpose" style="padding: 3px 15% 1px 15%;" ></span></td>
							<td style="text-align:right"><span  id="outtime"></span></td>
						</tr>
					</thead>
				</table>
				<table class="table table-bordered table-striped" style="font-size:14px;font-weight:400;border-spacing: 0;width:100%" id="mytable">
				   <thead>
						<tr>
						   <th data-resizable-column-id="a" style="width:5%;border:1px solid #000;" >序号</th>
						  <th  data-resizable-column-id="b" style="width:24%;border:1px solid #000;">供货单位</th>
						  <th  data-resizable-column-id="c" style="width:10%;border:1px solid #000;">物资名称</th>
						  <th  data-resizable-column-id="d" style="width:20%;border:1px solid #000;">规格</th>
						  <th  data-resizable-column-id="e" style="width:5%;border:1px solid #000;">单位</th>
						  <th  data-resizable-column-id="f" style="width:5%;border:1px solid #000;">数量</th>
						  <th  data-resizable-column-id="g" style="width:5%;border:1px solid #000;">单价</th>
						  <th  data-resizable-column-id="h" style="width:5%;border:1px solid #000;">金额</th>
						  <th  data-resizable-column-id="i" style="width:8%;border:1px solid #000;">备注</th>
						  <th  data-resizable-column-id="j" style="width:8%;border:1px solid #000; border:none"></th>
						</tr>
				  </thead>
				  <tbody id="summaryContent">
						
				  </tbody>
				</table>
				<table style="width:100%">
					 <thead>
						<tr>
							<td><span id="purchaser" >采购人：xxx</span></td>
							<td style="text-align:center"><span id="warehouse"  >仓库保管员：xxx</span></td>
							<td style="text-align:center"><span id="intime">入库时间：xxx</span></td>
						</tr>
					</thead>
				</table>
			  </div>
			</div>
		</div>
	  
	</div>
  </div>

 <div class="col-md-12"  id="hiddiv" style="padding-bottom:2em;text-align:center">
				<ul class="pagination" id="pageNum">
				</ul>
			<button class="btn btn-info" id="btn">打印</button>
	</div>
<script type="text/javascript" src="files/jquery-1.11.0.min.js"></script> 
<script src="files/colResizable-1.6.js" type="text/javascript"></script>
<script type="text/javascript" src="files/bootstrap-table.js"></script> 

<script src="files/Print.js"></script>
  <script>
  $(function() {
		$("#mytable").colResizable({		
			liveDrag: true,//实时显示滑动位置
			gripInnerHtml: "<div class='grip'></div>",
   			postbackSafe: true,//刷新后保留之前的拖拽宽度
		});
	})
  // $('#mytable tr').find('th:eq(9)').hide();
  
	var ticket = window.localStorage.getItem('ticket');
	var staffName= window.localStorage.getItem("staffName");//获取存入的数据
	
	eledata(1);
function eledata(current) {//页面刷新
var res = window.localStorage.getItem("printDataTime");//获取存入的数据
	if(res){//判空
	var entity = JSON.parse(res);//转为json	
	// <-----以下代码可以看作是ajax请求，到java项目中写ajax调用后端服务即可！-------------->
    const param = {
        dataSource: "materialManagement.selectNewList",
        type: "service",
        filters: {
		outOrIn:entity.outOrIn,
		create_time:entity.creat_Time,
		depPurpose:entity.depPurpose,
		workshopPurpose:entity.workshopPurpose,
		pageIndex:current,
		pageSize:10
        }
    }
    xmlhttp = null;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var data = xmlhttp.responseText
            var list = JSON.parse(data).list
            var length_num = list.length;
			var pagination = JSON.parse(data).pagination;
			var total_=pagination.total;
			var pageSize_=pagination.pageSize;
			var pageNum= Math.ceil(total_/pageSize_);
			var pageContent="";
			var time=entity.creat_Time;
			//分页代码
			for(var i=1;i<=pageNum;i++){
				if(current==i){
					pageContent+='<li><a οnclick="eledata('+i+')" class="active">'+i+'</a></li>'
				}else{
					pageContent+='<li><a οnclick="eledata('+i+')" >'+i+'</a></li>'
				}
			}
			
				var SerialNum=(current-1)*(pageSize_);
			
			
			$("#pageNum").html(pageContent);
			var tableContent="";
			//数据拼接或替换
            if (length_num != 0) {
                list.forEach(function (element, index) {
				 tableContent += '<tr>';
				 tableContent += '<td  align="center" style="border:1px solid #000;" >'+(SerialNum+element.index)+'</td>';
				 tableContent += '<td  style="border:1px solid #000;" >'+element.MaterialSupplier+'</td>';
			     tableContent += '<td align="center"  style="border:1px solid #000;" >'+element.MaterialName+'</td>';
			     tableContent += '<td  style="border:1px solid #000;" >'+element.SpecificationAndModel+'</td>';
				 tableContent += '<td align="center" style="border:1px solid #000;" >'+element.Company+'</td>';
				 tableContent += '<td align="center" style="border:1px solid #000;" >'+element.quantityCount+'</td>';
				 tableContent += '<td  align="center" style="border:1px solid #000;" >'+element.resOut+'</td>';
				 tableContent += '<td align="center" style="border:1px solid #000;" >'+element.bhsPrice+'</td>';
			     tableContent += '<td  style="border:1px solid #000;" ></td></tr>';
                })
				
				var wsp= list[0].workshopPurpose==null?"无":list[0].workshopPurpose
				var lyr= list[0].applyUser==null?"&nbsp;&nbsp;&nbsp;":list[0].applyUser
				var fzr= list[0].sjManager==null?"&nbsp;&nbsp;&nbsp;":list[0].sjManager
				document.getElementById('warehouse').innerHTML = '仓库保管员：'+staffName;
				document.getElementById('depPurpose').innerHTML = '接收部门：计划部';
				document.getElementById('workshopPurpose').innerHTML = '';
				
				document.getElementById('purchaser').innerHTML = '采购人：'+list[0].purchaser;
				document.getElementById('intime').innerHTML = '入库时间：'+list[0].materialTime;
				$("#summaryContent").html(tableContent);
            }

        }
    }
    xmlhttp.open("post", "/api/compose/manage/objectdata/query");//一个servlet，后面还可以写是否同步
    xmlhttp.setRequestHeader("content-type", "application/json;charset=utf-8")
    xmlhttp.setRequestHeader('Authorization', "Bearer " + ticket)
    xmlhttp.send(JSON.stringify(param));
	}
}
 //<-----以上代码可以看作是ajax请求，到java项目中写ajax调用后端服务即可！-------------->
 //打印按钮调用的方法   
	document.getElementById('btn').onclick = function () {
		Print('#wrap',{noPrint:'.pagination'});

    }
  </script>
</body>
</html>