Window.print() 实现浏览器打印
前言
由于在公司项目中有打印的具体业务场景，在查询相关资料后，找到了 Window.print() 是用来打印的方法，写下这篇文章供自己和大家查漏补缺。
语法
window.print();
该方法没有参数和返回值，在页面中直接调用，将直接打印整个页面,具体使用如下面代码所示
在点击打印该页面按钮后，会触发浏览器的打印对话框，对话框里有一些配置项，可以设置打印的相关参数。
根据上面的方法，我们就可以实现在浏览器中打印页面。
但是实际的开发中，我们的业务场景比这更加复杂。例如：只打印某个 DOM 元素，需要根据用户需求调整纸张的大小和形状，调整打印的布局，字体大小，缩放比例等等。这些都是常见的情况，那我们应该怎么做呢？
使用 @media 媒体查询
媒体查询 MDN解释：@media CSS @ 规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。
简单来说就是使用媒体查询根据不同的条件来决定应用不同的样式。具体到我们的需求就是，在打印时，使用专门的打印样式，隐藏其他元素，实现只打印某个元素的效果
使用样式表
在你的 标签中添加 link 元素，倒入专门供打印使用的样式表。你可以在样式表中编写打印是的具体样式。
<link href="/media/css/print.css" media="print" rel="stylesheet" />
打印页面时常用的一些样式
利用 print 设置打印页面的样式，利用 page 设置打印文档的纸张配置
/* print.css */
@media print {
* {
-webkit-print-color-adjust: exact !important; /* 保证打印出来颜色与页面一致 */
}
.no-break {
page-break-inside: avoid; /* 避免元素被剪切 */
}
.no-print {
display: none; /* 不想打印的元素设置隐藏 */
}
@page {
size: A4 prtrait; /* 设置打印纸张尺寸及打印方向：A4，纵向打印 */
margin-top: 3cm /* 利用 margin 设置页边距 */
}
}
使用 iframe 实现更加精细的打印
我们也可以将想要打印的内容在 iframe 中渲染出来并打印，通过创建一个隐藏的 iframe 元素，将想要打印的内容放入其中，然后触发 iframe 的打印功能，实现更加灵活的打印。伪代码如下所示：
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Use ifame print example</title>
<script>
function printPage() {
// 新建一个 iframe 元素并隐藏
const iframe = document.createElement("iframe");
iframe.style.position = "fixed";
iframe.style.right = "0";
iframe.style.bottom = "0";
iframe.style.width = "0";
iframe.style.height = "0";
iframe.style.border = "0";
// 将它添加到 document 中
document.body.appendChild(hideFrame);
// 拿到新创建的 iframe 的文档流
const iframeDocument = iframe.contentDocument;
// 在 iframe 中新建一个 link 标签，引入专门用于打印的样式表
const printCssLink = iframeDocument.createElement('link')
printCssLink.rel = 'stylesheet';
printCssLink.type = 'text/css';
printCssLink.media = 'print';
printCssLink.href = `medis/css/print.css`;
iframeDocument.head.appendChild(printCssLink);
// 在 iframe 中新建一个容器，用来存放你想要打印的元素
let printContainer = iframeDocument.createElement('div');
iframeDocument.body.appendChild(printContainer);
iframeDocument.close(); // 关闭 iframe 文档流
// 获取 iframe 的 window 对象
const iframeWindow = iframe.contentWindow;
// 当 iframe 内容加载完成后触发打印功能。
iframeWindow.onload = function() {
iframeWindow.print();
}
// 打印完后移除 iframe 元素
document.body.removeChild(iframe);
}
</script>
</head>
<body>
<p>
<span onclick="printPage();">
Print external page!
</span>
</p>
</body>
</html>
以上就是关于我在使用 Window.print() 打印页面的一些总结，欢迎大家有问题在评论区讨论学习。
作者：It_Samba
来源：juejin.cn/post/7267091417021628475
来源：juejin.cn/post/7267091417021628475
