Jquery、Js实现⽹页打印，及打印样式的⾃定义
本来今天准备继续更新webpack的内容的，但是上午修改了⼀下公司⽹站的代码，然后就开始研究⽹页打印的东西了，弄了⼀下午，搞的整个⼈都不好了。刚好也来讲⼀下⼀些收获，其实也不算什么收获，但是还是来跟⼤家分享⼀下。
window.print()
这个是实现⽹页打印的⽅法函数，其实针对⽹页打印，有⼏个应⽤场景；
第⼀种情况，最简单的应⽤，就是单纯的打印⽹页的⽂本内容，没有样式什么的特别需求。
第⼆种情况，就是根据项⽬要求，配合特定打印纸张的要求（例如A4纸、银⾏卡、质保卡、订单信息等），实现特定样式的打印
先来说⼀下，⽹站的打印⽅案有很多，但是讲到的都是第⼀种情况的打印实现，从我个⼈来说，作⽤不是很⼤，只是简单的介绍了怎样实现打印，但是我们的实际项⽬不可能说，单纯的把⽂本内容打印出来，既简单⼜丑陋。很多时候不论是客户还是公司来说，都希望你打印出来的东西跟你⽹页上，或者真实的打印单据的格式是⼀样的。
接下来我们开始讲我们的实现⽅案：
1、通常采⽤的是 iframe 打印⽅法，不管是实现局部，或者是实现整个页⾯的打印。当然，你的打印内容如果只是单纯页⾯上的内容，不需要通过数据交互获取数据之后再打印的除外。那我们先来将最简单的，就是你页⾯的单纯打印，这⾥分为 整体打印 和 局部打印。
不使⽤--iframe
整体打印-------直接调⽤⽅法就可以了
window.print();
局部打印-------打印的时候，把需要打印的内容替换成整个body内容（⽤户会在打印的时候看到变化，⽤户体验不太好）
<body> <!--startprint1--> <div id="printBody"> </div> <!--endprint1--> </body> JS
<script type="text/javascript"> var bdhtml; sprnstr; eprnstr; prnhtml; bdhtml=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="<!--startprint1-->";//设置打印开始区域 eprnstr="<!--endprint1-->";//设置打印结束区域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html window.document.body.innerHTML=prnhtml; window.print(); </script>
使⽤--iframe
我⾮常不推荐上⾯的⽅法，他只是在你最简单的需求下才可以使⽤。说下为什么不推荐，上⾯的⽅法有⼏个坑，页⾯打印过后 会导致页⾯上所有的按钮，标签等绑定的事件都失效，这个你怕不怕；还有就是毕竟打印的是页⾯的⼀部分，看着不清楚也不 ⽅便维护；⽽且如果是在页⾯上只有在需要的时候才调出来（例如事先隐藏起来，等到打印的时候再调⽤出来）有可能会导致 你整个页⾯样式的崩溃。简单网页
好了，转⼊正题，⾸先先要在所在的页⾯中放⼀个Iframe标签。记住宽和⾼都是0，这样不会对你的页⾯有丝毫的影响。
页⾯1（是需要调⽤到打印的页⾯）
<body >
<button type="button" id="printBtn">打印</button>
<iframe frameborder="0" src="" id="printFrame" ></iframe>
<script type="text/javascript" src="/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$"#printBtn"click function
$"#printFrame"attr'src''./printIframe.html'
</script>
</body>
页⾯2（printIframe.html页⾯）
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Title</title> <style
type="text/css" media="print"> html{ height: 100%; width: 100%; } </style> </head> <body > <div id="printBody" > </div> <script
type="text/javascript" src="/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var pdata = [ {"id":"productId","top":"95","left":"20"}, {"id":"customer","top":"120","left":"80"}, {"id":"dfadfa","top":"150","left":"50"} ] var infoHtml = ''; for (var i = 0;i<pdata.length;i++){ var top1 = (pdata[i].top/176)*100+'%'; var left = (pdata[i].left/261)*100+'%'; infoHtml += '<span >'+pdata[i].id+'</span>'; }
$("#printBody").html(infoHtml); window.print(); </script> </body> </html>
讲⼀下，我的本次项⽬的要求是： 打印质保卡，类似于银⾏卡⼤⼩，上⾯带有背景图案，并且显⽰相应信息。
项⽬开始做了⼀下⾯的图⽚的页⾯（中间红⾊边框的背景图是先随意上传的，我们要实现的功能      就是和背景图⼀样的打印），复选框的选中与否代表着要显⽰在质保卡上的信息选项。然后出现      在红框内的选项字段是可以拖动的，拖动到确定位置之后，把信息保存下来作为将来打印的模      板。这部分保存的信息有（要显⽰的字段名称，其相对于红⾊框所在的位置，这⾥获取的是相对      于红⾊框的绝对定位位置，position为absolute的top和left值）。下⾯的内容才是今天要讲到的主题，我们在printIframe.html中获取到数据（上⾯html中的pdata是假数据，跟真数据差不多），之前是直接拿到数
据之后，在页⾯中按照绝对定位的px值进⾏定位，但是打印页⾯出来的想过不是预期的那样，我们想要的是上图红⾊框包含的样式。⽹页打印预览出来之后信息都出现在了左上⾓，并没有跟红⾊框所展现的那样进⾏布局。
这是因为，我们最初这是红⾊框的宽和⾼都是固定的为261px和176px，⽽打印⽹页是按照浏览器的window1⼤⼩的100%显⽰的，所以这⾥我们的打印页⾯的宽和⾼都是window的100%⼤⼩，所以我们这⾥的定位就不能直接⽤px只来定位了，应该⽤百分⽐来定位，之后这样才能让相应字段显⽰在相应位置。这⾥的⼀个核⼼思想就是，打印的布局样式要以打印窗⼝宽⾼的100%为基准来进⾏布局，通过计算出对应元素在页⾯中的百分⽐位置或者⼤⼩，才能够实现和局部样式⼀样的效果.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。