JavaScript前端实现局部打印(精确打印)的几种方式

一、使用window.print()和id选择器

将需要打印的内容包裹在一个容器内，比如一个<div>标签，并为该容器设置一个ID。

<div id=\”printBox\” style=\”display: none;\”></div>
编写一个函数，当触发打印操作时，先将需要打印的内容提取出来，然后将不需要打印的内容从DOM中移除，最后再调用window.print()方法进行打印。打印完成后，再将之前移除的内容恢复到DOM中。

function doPrint() {
var divToPrint = document.getElementById(\’printBox\’);
var originalContents = document.body.innerHTML;
document.body.innerHTML = divToPrint.innerHTML;
window.print();
document.body.innerHTML = originalContents;
}

注意：由于替换了当前页面的内容，当取消打印时，会使原来的页面一些form表单失效。并且当前页面中的样式会影响到打印的内容中的样式。

创建iframe

在HTML中创建一个iframe元素，并为其设置一个唯一的ID。

注：为了确保iframe的存在与否，你可以使用JavaScript的document.getElementById()方法进行检查。如果返回值为null，则表示iframe不存在，你可以根据需要创建一个新的iframe。
向iframe中写入内容

将需要打印的内容写入到iframe中。这可以通过JavaScript的document.write()方法实现。例如：
调用打印

调用iframe的window.print()方法来进行打印。
清理iframe

function doPrint(){
var iframe = document.getElementById(\’printFrame\’);
if (!iframe) {
iframe = document.createElement(\’iframe\’);
iframe.id = \’printFrame\’;
iframe.setAttribute(\’style\’, \’position:absolute;width:0px;height:0px;left:-500px;top:-500px;\’);
document.body.appendChild(iframe);

iframe.contentDocument.write(\'<html><head><link rel=\”stylesheet\” href=\”your-styles.css\” rel=\”external nofollow\” /></head><body>\’ + yourContent + \'</body></html>\’);
iframe.contentDocument.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
document.body.removeChild(iframe);
}
}