tampermonkey 使用原生JS打印节点 不使用 jspdf 和 html2canvas等第三方库,带上原始节点的样式
时间: 2024-01-24 09:16:44 浏览: 93
要原生 JS 打印节点并带上原始节点的样式,可以使用 `window.print()` 方法和 CSS 的 `@media print` 媒体查询。
首先,需要在 CSS 中定义 `@media print` 媒体查询,以便在打印时应用适当的样式:
```css
@media print {
/* 在打印时隐藏不必要的元素,如导航栏、侧边栏等 */
header, nav, aside, footer {
display: none;
}
/* 调整页面边距和字体大小等 */
body {
margin: 0;
font-size: 12pt;
}
/* 打印时不显示背景颜色和背景图片 */
* {
background-color: transparent !important;
background-image: none !important;
}
/* 打印时保留节点的样式 */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
```
然后,在 JavaScript 中,可以使用 `window.print()` 方法将当前页面打印出来:
```javascript
function printNode(node) {
// 将节点添加到一个空白页面中
const doc = document.implementation.createHTMLDocument();
doc.body.appendChild(node.cloneNode(true));
// 覆盖页面样式为打印样式,并调用 window.print() 方法打印
const style = doc.createElement('style');
style.textContent = '@media print { body { visibility: hidden; } }';
doc.head.appendChild(style);
window.print();
}
```
调用 `printNode()` 函数时,需要将要打印的节点作为参数传入:
```javascript
const node = document.querySelector('#my-node');
printNode(node);
```
这样就可以使用原生 JS 打印节点并带上原始节点的样式了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)