打印网页时,前端写法

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”)
3.也可只打印部分内容(方法自行百度~)
上一篇下一篇

猜你喜欢

热点阅读