js打印方式,window.print()

tech2022-08-06  1

页面打印的相关问题。

1.使用js自带的打印方式,window.print()方式进行打印。

去除页眉页脚,设置横向纵向或者A3等,在style上增加@page样式。

<style> @page { size:auto;         margin: 0mm;     } </style>

size:landscape(横向)或者size:A3(A3) .

 

2.打印指定区域的div内容,使用printarea插件

引入js:

<script language="javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery.PrintArea.js"></script>

html引用:

<div class="my_show"> 这个是打印时显示的。 </div> <div class="my_hidden"> 这个是打印时隐藏的。 </div> <input type="button" id="print"/>

js调用:

$(document).ready(function(){ $("#print").click(function(){ $(".my_show").printArea(); }); });

此方式,在页面宽度足够宽时,打印依然会超出页面。

 

3.打印iframe的内容

<input type="button" value="打印此页面" onclick="printpage()" /> <div style="height:800px;width:800px;"> <iframe style="height:100%;width:100%;" src="https://www.runoob.com" id="test"/> </div>

js方法:

function printpage(){ var iframe = document.getElementById('test'); iframe.contentWindow.focus();//获取焦点 iframe.contentWindow.print(); }

这种情况,在跨域的情况下,并不能实现跨域打印,跨域情况将打印功能加载子页面

可以通过url方式,增加isPrint=1参数,当进入子页面时进行判断,判断该参数,值是否为1直接进行打印操作。同样增加子页面增加打印按钮也能实现打印功能。

if(window.location.href.indexOf('isPdfPrint=1')>0){ setTimeout(function(){ window.print(); },200) }