tampermonkey 使用原生JS打印节点 不使用 jspdf 和 html2canvas等第三方库,带上原始节点的样式
时间: 2024-01-24 09:16:48 浏览: 14
可以使用原生JS中的 `window.print()` 方法来打印节点,并且可以使用 `@media print` 媒体查询来设置打印样式。
首先,我们需要获取到需要打印的节点,例如:
```javascript
const nodeToPrint = document.getElementById('node-id');
```
然后,我们可以使用 `window.print()` 方法来打印该节点:
```javascript
function printNode(node) {
const oldPage = document.body.innerHTML;
const newPage = `<html><head><title></title></head><body>${node.outerHTML}</body></html>`;
document.body.innerHTML = newPage;
window.print();
document.body.innerHTML = oldPage;
return false;
}
printNode(nodeToPrint);
```
这段代码会将需要打印的节点的 HTML 代码替换整个页面的 HTML 代码,然后使用 `window.print()` 方法来打印页面。最后,再将页面 HTML 恢复为之前的状态。
如果需要打印节点的样式,可以使用 `@media print` 媒体查询来设置打印样式,例如:
```css
@media print {
#node-id {
/* 设置需要打印的样式 */
}
}
```
这样,在打印时,节点会应用该样式。