tampermonkey 使用原生JS打印节点 不使用 jspdf 和 html2canvas等第三方库,带上原始节点的样式
时间: 2024-01-24 08:16:55 浏览: 18
要使用原生JS打印节点并带上原始节点的样式,可以使用 `window.print()` 方法。这个方法会打印当前页面的所有内容,但是不会带上原始节点的样式。为了解决这个问题,我们可以使用 `@media print` 媒体查询和 `print` CSS 样式。
首先,我们需要在 CSS 样式表中添加 `@media print` 媒体查询,然后在其中定义需要打印的样式。比如,我们可以定义以下样式来打印一个名为 "print-me" 的元素及其子元素:
```css
@media print {
.print-me {
background: white;
color: black;
border: 1px solid black;
padding: 10px;
}
}
```
在这个样式中,我们使用 `@media print` 媒体查询来指定只有在打印时才应用这个样式。然后,我们定义了带有 `print-me` 类的元素及其子元素应该具有的样式。在本例中,我们设置背景为白色,文本为黑色,边框为 1 像素黑色,内边距为 10 像素。
接下来,我们需要使用 JavaScript 将需要打印的元素的类名设置为 `print-me`。比如,如果要打印 ID 为 "content" 的元素,可以使用以下代码:
```javascript
document.getElementById("content").classList.add("print-me");
```
这个代码将给 ID 为 "content" 的元素添加 `print-me` 类。
最后,我们可以使用 `window.print()` 方法打印页面。这个方法会打印整个页面,并且只会包含带有 `print-me` 类的元素及其子元素的样式。比如,可以使用以下代码来触发打印操作:
```javascript
window.print();
```
这样就可以使用原生 JS 打印节点,并带上原始节点的样式了。