打印网页时,前端写法
2020-04-26 本文已影响0人
Roseska
打印网页时,在保证打印效果的前提下,前端要怎么写呢
1.在打印时调用的样式(px--->pt(打印时使用pt)、样式表、媒体查询)
//打印时example.css生效
<link href="/example.css" media="print" rel="stylesheet" />
//媒体查询
h1 {
font-size: 14px;
}
//打印时的样式
@media print {
h1 {
font-size: 20px;
}
}
用js控制
window.matchMedia 测试媒体查询接口
function myFunction(x) {
if (x.matches) { // 媒体查询
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "block";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // 执行时调用的监听函数
x.addListener(myFunction) // 状态改变时添加监听器
2.手动调用打印方法
window.print()
1.window.print()
或
2.document.execCommand(”print”)