tampermonkey 使用原生JS打印节点 不使用 jspdf 和 html2canvas等第三方库,带上原始节点的样式
时间: 2024-01-24 10:16:52 浏览: 125
原生JS不依赖其它库分页代码.zip_html_html 模板_jquery_js分页
要使用原生JS打印节点,并且带上原始节点的样式,可以使用`window.print()`方法来实现。
具体步骤如下:
1. 获取需要打印的节点
```
var node = document.getElementById('要打印的节点ID');
```
2. 创建一个新的窗口
```
var newWin= window.open('', '', 'width=800,height=600');
```
3. 在新窗口中写入需要打印的节点的HTML代码
```
newWin.document.write(node.outerHTML);
```
4. 在新窗口中引入节点的CSS样式
```
var style = document.createElement('style');
style.innerHTML = window.getComputedStyle(node).cssText;
newWin.document.head.appendChild(style);
```
5. 打印新窗口
```
newWin.print();
```
6. 关闭新窗口
```
newWin.close();
```
完整代码示例:
```
var node = document.getElementById('要打印的节点ID');
var newWin= window.open('', '', 'width=800,height=600');
newWin.document.write(node.outerHTML);
var style = document.createElement('style');
style.innerHTML = window.getComputedStyle(node).cssText;
newWin.document.head.appendChild(style);
newWin.print();
newWin.close();
```
阅读全文