tampermonkey 使用原生JS打印节点 不使用 jspdf 和 html2canvas等第三方库,带上原始节点的样式
时间: 2024-01-24 10:16:59 浏览: 24
要打印一个节点并带上原始节点的样式,可以使用`window.print()`方法直接打印当前页面。如果你只想打印某个特定的节点,可以先将该节点复制到一个新的页面中,然后再使用`window.print()`方法打印新页面。
以下是一个示例代码,可以实现复制节点并打印:
```javascript
// 获取需要打印的节点
var node = document.getElementById('my-node');
// 创建新页面
var printWindow = window.open('', '', 'height=400,width=600');
// 将节点复制到新页面
printWindow.document.write('<html><head><title>Print</title>');
printWindow.document.write('</head><body >');
printWindow.document.write(node.outerHTML);
printWindow.document.write('</body></html>');
// 打印新页面
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
```
在这个示例中,我们首先通过`getElementById`方法获取了一个需要打印的节点。然后,我们使用`window.open()`方法创建了一个新页面,并将节点的`outerHTML`复制到新页面中。最后,我们使用`window.print()`方法打印新页面,并关闭该页面。
需要注意的是,新页面中的样式可能会受到一些限制,比如无法加载外部样式表等。如果需要确保新页面中的样式和原始页面完全一致,可以考虑使用`@media print`媒体查询来定义打印样式,或者使用`<link rel="stylesheet" media="print" href="print.css">`将打印样式表链接到新页面中。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)