目录一、编辑打印区域二:将不需要打印的部分隐藏一、编辑打印区域 思路: 通过编辑打印的开始、结束标记来区分打印的区域 html: <!--startprint--> &l
思路:
通过编辑打印的开始、结束标记来区分打印的区域
html:
<!--startprint-->
<div>打印的区域</div>
<!--endprint-->
js:
function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
eprnstr="<!--endprint-->"; //结束打印标识字符串
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
window.print(); //调用浏览器的打印功能打印指定区域
window.document.body.innerHTML=bdhtml;//重新给页面内容赋值;
return false;
}
传送门:window.print()局部打印三种方式
思路:
在打印之前利用Jquery的$(selector).hide(speed,callback)语法将不需要的元素先隐藏,打印之后再将隐藏的元素显示出来$(selector).show(speed,callback)
HTML:
<button class="btn btn-primary" style="width: 85px;height: 40px;margin-left: 25px;" onclick="doPrint_hide()">
打印
</button>
<div class="tab_out1 hide_when_print">
11111
</div>
<div class="everyCustomer_list">
22222
</div>
<div class="fORM-horizonta hide_when_print">
3333
</div>
js:
<script>
function doPrint_hide() {
window.print()
}
$(function () {
var beforePrint = function () {
//将需要打印的元素上加一个 hide_when_print类(可以随便定义),这个类是专门控制显示隐藏的
$(".hide_when_print").hide()
console.log('打印前');
//设置打印时的页面的样式
document.getElementsByTagName('body')[0].style.zoom = 1.10;
var CSS = {
'display': 'flex',
'flex-direction': 'column',
'justify-content': 'center',
'flex-wrap': 'wrap',
};
var css1 = {
"margin": '2px auto'
}
var css2 = {
'border': "0"
}
$("#tab_out1").css(css)
$(".everyCustomer_list").css(css1)
$(".form-horizontal").css(css2)
};
var afterPrint = function () {
console.log('打印后');
document.getElementsByTagName('body')[0].style.zoom = 1.00;
//显示之前被隐藏的元素
$(".hide_when_print").show();
//设置打印后的样式
var css = {
'display': 'flex',
'flex-direction': 'row',
'justify-content': 'flex-start',
'flex-wrap': 'wrap',
};
var css1 = {
'margin': '0',
'margin-left': '12px',
'margin-top': '20px'
}
var css2 = {
'border': "1px solid #e7e7eb"
}
$("#tab_out1").css(css);
$(".everyCustomer_list").css(css1);
$(".form-horizontal").css(css2)
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (MQl) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
})
</script>
到此这篇关于window.print()打印html网页的两种方法实现的文章就介绍到这了,更多相关window.print()打印html网页内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: window.print()打印html网页的两种方法实现
本文链接: https://www.lsjlt.com/news/153039.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0