tampermonkey 使用原生JS打印节点 不使用 jspdf 和 html2canvas等第三方库,带上原始节点的样式
时间: 2024-01-24 13:17:04 浏览: 104
要使用原生JS打印节点,可以使用`window.print()`方法来实现。但是,该方法只会打印整个页面,而不是指定的节点。因此,我们需要将指定节点的内容复制到一个新的临时页面中,然后再使用`window.print()`方法打印该页面。
以下是一个示例代码,演示如何使用原生JS打印节点并保留其原始样式:
```javascript
// 获取要打印的节点
var nodeToPrint = document.getElementById("my-node");
// 创建一个新的临时页面
var tempPage = window.open();
// 在新页面中添加要打印的节点
tempPage.document.write(nodeToPrint.outerHTML);
// 等待节点加载完毕
tempPage.document.addEventListener("DOMContentLoaded", function() {
// 打印新页面
tempPage.print();
// 关闭新页面
tempPage.close();
});
```
在上面的代码中,我们首先获取要打印的节点,然后创建一个新的临时页面。接着,我们将要打印的节点的`outerHTML`属性添加到新页面中。这样可以确保节点的所有样式和属性都被正确地复制到新页面中。
接下来,我们等待新页面中的节点加载完毕,然后使用`window.print()`方法打印该页面。最后,我们关闭新页面,以确保它不会保留在用户的浏览器中。
相关问题
tampermonkey 使用原生JS打印节点 不使用 jspdf 和 html2canvas等第三方库
要在 Tampermonkey 中使用原生 JavaScript 打印节点,可以使用以下步骤:
1. 获取要打印的节点
```javascript
let node = document.getElementById('my-node');
```
2. 创建一个空的窗口
```javascript
let printWindow = window.open('', '', 'height=400,width=800');
```
3. 在新窗口中添加节点
```javascript
printWindow.document.write(node.outerHTML);
```
4. 打印窗口
```javascript
printWindow.print();
```
完整的代码如下:
```javascript
// 获取要打印的节点
let node = document.getElementById('my-node');
// 创建一个空的窗口
let printWindow = window.open('', '', 'height=400,width=800');
// 在新窗口中添加节点
printWindow.document.write(node.outerHTML);
// 打印窗口
printWindow.print();
```
这样就可以使用原生 JavaScript 在 Tampermonkey 中打印节点了。