在前端开发中,有时需要将网页内容打印出来。而对于需要打印的特定区域,可以使用 <div>
标签指定一个打印区域,然后通过 JavaScript 代码控制打印操作。
使用 window.print()
在浏览器中,可以调用 window.print()
方法实现打印功能。如果要指定打印区域,可以先将需要打印的内容放到一个 <div>
标签中,并给该标签设置一个 ID。例如:
<div id="printarea"> <!-- 要打印的内容 --> </div>
然后,通过以下 JavaScript 代码,将打印区域传递给 window.print()
方法即可实现打印:
var printContent = document.getElementById("printarea"); window.print(printContent);
使用 CSS 控制打印样式
除了指定打印区域外,还可以使用 CSS 控制打印样式。可以在 CSS 文件中编写针对打印时的样式,例如:
-- -------------------- ---- ------- ------ ----- - ---- - ---------- ----- - -- - ---------- ----- - -- ------ -- -
这样,在打印时,浏览器会自动应用这些样式,从而生成符合预期的打印结果。
示例代码
下面是一个完整的示例代码,演示如何打印指定区域的内容,并使用 CSS 控制打印样式:
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------- ------- ------ ----- - ---- - ---------- ----- - -- - ---------- ----- - -- ------ -- - -------- ------- ------ ------------- ------------------ ---- --------------- --------------- ---- ------------ ------------ ------------ ----- ------ ------- ------------------------------------ ------- -------
在该示例中,通过设置打印区域的 ID 为 printarea
,并将打印操作绑定在 "打印" 按钮上,实现了打印功能。同时,在 CSS 中定义了针对打印时的字体大小等样式。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/8455