tampermonkey 使用原生JS打印节点 不使用 jspdf 和 html2canvas等第三方库,带上原始节点的样式
时间: 2024-01-22 13:21:38 浏览: 133
要使用原生JS打印节点并带上原始节点的样式,可以使用`window.print()`方法,该方法可以打印当前页面的内容。为了打印指定的节点,可以先将该节点复制到一个新的隐藏元素中,然后再将该隐藏元素打印出来。
以下是一个示例代码:
```javascript
function printNodeWithStyle(node) {
// 创建一个新的隐藏元素
var printElement = document.createElement('div');
printElement.style.display = 'none';
document.body.appendChild(printElement);
// 将指定节点的 HTML 和样式复制到新的元素中
printElement.innerHTML = node.outerHTML;
var computedStyle = window.getComputedStyle(node);
for (var i = 0; i < computedStyle.length; i++) {
var styleName = computedStyle[i];
printElement.style[styleName] = computedStyle.getPropertyValue(styleName);
}
// 调用 window.print() 方法打印
window.print();
// 移除新的元素
document.body.removeChild(printElement);
}
```
调用该函数时,传入需要打印的节点即可:
```javascript
var nodeToPrint = document.getElementById('my-node');
printNodeWithStyle(nodeToPrint);
```
注意:由于浏览器的安全机制,`window.print()`方法只能由用户手动触发,无法通过代码自动触发。因此,以上代码只能在用户点击打印按钮后生效。
阅读全文