vue使用iview只打印部分页面元素
时间: 2023-09-18 19:13:06 浏览: 54
您可以使用`window.print()`方法来打印页面,但是如果您只想打印部分元素,可以使用以下步骤:
1. 在需要打印的元素上添加一个特定的类名,例如`print-only`。
2. 使用`@media print`媒体查询来隐藏除需要打印的元素以外的所有元素。
```css
@media print {
body * {
visibility: hidden;
}
.print-only {
visibility: visible;
}
}
```
3. 在打印之前,使用JavaScript将需要打印的元素复制到一个新的隐藏的div中。
```javascript
const printContent = document.querySelector('.print-only').innerHTML;
const container = document.createElement('div');
container.innerHTML = printContent;
container.style.display = 'none';
document.body.appendChild(container);
```
4. 然后调用`window.print()`方法进行打印。
5. 最后在打印完成后,使用JavaScript将新的div从页面中移除。
```javascript
container.parentNode.removeChild(container);
```