看了vue-print-nb的源码之后，这里实现了一下它的核心部分原理，没有实现获取css的部分，要用下面功能在业务中，需要写行内样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 50px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div>无关内容1</div>
<div>无关内容2</div>
<div>无关内容3</div>
<button id="clickPrint">打印</button>
<script>
let iframe = document.createElement('iframe');
iframe.setAttribute('id','iframe');
iframe.style.border = '0px';
iframe.style.position = 'absolute';
iframe.style.width = '0px';
iframe.style.height = '0px';
iframe.style.right = '0px';
iframe.style.top = '0px';
document.body.appendChild(iframe);
let iframeWindow = document.getElementById('iframe').contentWindow;
let iframeDocument = iframeWindow.document;
iframeDocument.body.innerHTML = `
<div>要打印的内容1</div>
<div>要打印的内容2</div>
<div>要打印的内容3</div>
`
document.getElementById('clickPrint').addEventListener('click', e=> {
iframeWindow.print()
});
</script>
</body>
</html>
页面显示
点击打印
