前端js浏览器打印

window.print 概述

window.print() 是 JavaScript 中的一个内置函数，用于打印当前页面的内容。当用户点击浏览器工具栏中的打印按钮或者使用 Ctrl+P 快捷键时，将触发 window.print() 函数。

window.print() 函数会打开一个打印窗口，用户可以在该窗口中选择打印机、设置打印参数、预览打印内容等。当用户完成打印设置后，可以点击打印窗口中的确定或取消按钮，将页面内容发送到打印机进行打印。

需要注意的是，window.print() 函数仅适用于支持打印功能的浏览器。在使用之前，请确保您的用户使用的是支持打印功能的浏览器。

以下是一个简单的示例，演示如何使用 window.print() 函数打印当前页面：

// 点击打印按钮时触发

document.getElementById("print-button").addEventListener("click", function() {
 window.print();
});

如果您想了解更多关于 window.print() 函数的信息，可以查阅 Web 浏览器的文档。

用法说明

window.print()是调用浏览器打印的方法。但默认是打印window当前所在页的整个页面，那有没有办法，只打印某一块区域，或者说，只打印某一个Dom元素内的元素呢。

function BrowserPrint （Dom）{
	window.document.body.innerHTML = Dom.innerHTML;
    window.print(); 
    // 打印完成以后一定要重新刷新页面，因为window被要打印的Dom取代了
    window.location.reload();
}

const printDom = window.document.getElementById('content-area');
BrowserPrint (printDom);

遇到一个需求，打印iframe标签src指向的文件，稍微有点麻烦，仍在探索中，可能是因为跨域的问题，导致获取 iframe的contentWindow时不顺利，也就没办法调用iframe子页面的print方法了。

通常用法

Window.print()是JavaScript中的一个内置function。当调用此函数时，浏览器会弹出打印对话框，允许用户选择打印选项并打印当前页面。

使用Window.print()可以控制打印页面的外观和格式，使其更适合打印。例如，您可以在样式表中定义打印特定的样式，或者使用JavaScript更改页面元素的显示方式，以便在打印时更美观。

以下是使用Window.print()的示例代码：

function myPrintFunction() {
  // 将页面的背景颜色更改为白色，以便在打印时看起来更好
  document.body.style.backgroundColor = "white";
  // 弹出打印对话框
  window.print();
  // 将页面的背景颜色更改回来
  document.body.style.backgroundColor = "";
}

在HTML中，您可以将此函数添加到按钮或链接的onclick事件处理程序中，以允许用户手动触发打印操作：

<button onclick="myPrintFunction()">打印页面</button>

Window.print()还具有其他可选参数，例如强制打印所有页面内容（而不仅仅是当前可见内容）和更改打印设置选项。但在大多数情况下，简单调用Window.print()就足够了。