tampermonkey 使用原生JS打印节点 不使用 jspdf 和 html2canvas等第三方库,带上原始节点的样式
时间: 2024-01-24 07:16:58 浏览: 6
可以使用原生JS的`window.print()`方法来打印节点,同时使用CSS的`@media print`媒体查询来控制打印时的样式。
下面是一个示例代码,其中`targetNode`为需要打印的节点,`printStyles`为打印时需要添加的样式。
```javascript
// 获取需要打印的节点
var targetNode = document.getElementById('targetNode');
// 创建一个用于打印的iframe
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
// 获取iframe的document对象
var iframeDoc = iframe.contentWindow.document;
// 将需要打印的节点添加到iframe中
iframeDoc.body.appendChild(targetNode.cloneNode(true));
// 添加打印时需要的样式
var printStyles = `
body * {
visibility: hidden;
}
#targetNode, #targetNode * {
visibility: visible;
}
#targetNode {
position: absolute;
left: 0;
top: 0;
}
`;
var style = iframeDoc.createElement('style');
style.textContent = printStyles;
iframeDoc.head.appendChild(style);
// 打印iframe中的内容
iframe.contentWindow.print();
// 移除iframe
document.body.removeChild(iframe);
```
在上面的代码中,我们首先创建了一个隐藏的iframe,并将需要打印的节点添加到其中。然后,我们使用CSS的`visibility`属性来控制打印时哪些元素需要显示,哪些元素需要隐藏。最后,我们调用了`window.print()`方法来打印iframe中的内容,并在打印完成后移除了该iframe。