前言
一般信息填写类的需求页面,都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图,而打印则是基于预览来生成 PDF 文件。
浏览器原生 API window.print()
可以用于打印当前窗口(window.document)视图内容。调用此方法会产生一个打印预览弹框,用户可以根据具体设置来得到打印结果。
接下来将从 code 层面带领大家熟悉「打印」的使用。
一、打印样式
默认情况下,基于页面上的内容,会将元素,布局和样式都进行打印;
如果仅想在打印上设置特殊样式,可以通过以下方式:
1.使用打印样式表:
<link href="print.css" media="print" rel="stylesheet" />
2.使用媒介查询:
@media print {p{color: lavender;background: #ccc;}h1{color: lightblue;background: #ccc;}
}
3.使用内联 media 属性
<style media="print"> p{color: lavender;background: #ccc;}h1{color: lightblue;background: #ccc;} </style>
默认情况下,元素的背景色不会被打印,可通过设置属性来支持:
div{// Chrome、Safari 等 webkit 浏览器内核-webkit-print-color-adjust: exact;// 火狐print-color-adjust: exact;color-adjust: exact;
}
二、打印指定区域内容
默认情况下,调用 window.print() 会对整个 document.body 进行打印,当需要打印指定容器内容时,可以通过以下几种方式:
1. 对容器进行打印
<body><div id="container"><p>这是一个段落</p><h1>这是一个标题</h1></div><input type="button" value="打印此页面" onclick="printpage()" /><script> const printpage = () => {let newstr = document.getElementById("container").innerHTML;let oldstr = document.body.innerHTML;document.body.innerHTML = newstr;window.print();document.body.innerHTML = oldstr;} </script>
</body>
2. 对容器内的部分内容进行打印
当只需要打印容器内某一部分内容时,可以通过注释标识进行截取。
<body><div i