tampermonkey 使用原生JS打印节点 不使用 jspdf 和 html2canvas等第三方库,带上原始节点的样式
时间: 2024-01-24 20:16:56 浏览: 11
要打印一个带有原始节点样式的节点,可以使用`window.print()`方法实现。这将打印当前页面的内容,包括你所选择的节点。
以下是一个例子,假设我们想要打印一个id为`my-node`的节点:
```javascript
// 获取需要打印的节点
const nodeToPrint = document.getElementById('my-node');
// 克隆节点,创建一个新的节点以便打印
const clonedNode = nodeToPrint.cloneNode(true);
// 创建一个新的iframe元素,用于打印
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
// 在iframe中插入克隆的节点
iframe.contentDocument.body.appendChild(clonedNode);
// 等待iframe加载完成后,执行打印操作
iframe.onload = function() {
iframe.contentWindow.print();
};
// 删除iframe元素
setTimeout(() => {
document.body.removeChild(iframe);
}, 100);
```
这段代码会将`my-node`节点克隆一份,并在一个隐藏的iframe元素中插入该克隆节点。然后等待iframe加载完成后,执行`window.print()`方法打印该节点。最后,通过`setTimeout()`方法删除iframe元素。