tampermonkey 使用原生JS打印节点 不使用 jspdf 和 html2canvas等第三方库,带上原始节点的样式
时间: 2024-01-24 22:18:32 浏览: 145
要打印一个节点并保留其原始样式,可以使用`window.print()`方法。这将调用浏览器的打印功能,允许用户选择打印选项并打印页面。
以下是一个示例脚本,可以通过 Tampermonkey 插件运行在浏览器中,以打印指定节点:
```javascript
// ==UserScript==
// @name Print Node with Original Style using Tampermonkey
// @namespace http://tampermonkey
// @version 1.0
// @description Prints a specific node with its original style using native JS without third-party libraries such as jspdf and html2canvas
// @match http://*
// @match https://*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Get the node to be printed
var nodeToPrint = document.getElementById("node-id");
// Create a new window to contain the printed node
var newWindow = window.open();
newWindow.document.write('<html><head><title>Print Node</title></head><body></body></html>');
newWindow.document.close();
// Clone the node and append it to the new window's body
var clonedNode = nodeToPrint.cloneNode(true);
newWindow.document.body.appendChild(clonedNode);
// Apply the original styles to the cloned node
var styleSheets = document.styleSheets;
for (var i = 0; i < styleSheets.length; i++) {
var rules = styleSheets[i].cssRules;
for (var j = 0; j < rules.length; j++) {
var rule = rules[j];
if (rule.selectorText) {
var elements = clonedNode.querySelectorAll(rule.selectorText);
for (var k = 0; k < elements.length; k++) {
var element = elements[k];
element.style.cssText += rule.style.cssText;
}
}
}
}
// Print the new window
newWindow.print();
})();
```
在脚本中,将节点的样式应用到克隆的节点中,以便在新窗口中打印时保留原始样式。请注意,此代码仅适用于当前页面中的样式表,如果要打印其他页面中的节点,则需要对样式表进行跨域处理。
阅读全文