还有其他方法么
时间: 2023-08-04 12:26:00 浏览: 99
除了使用第三方库和浏览器自带的 `window.print()` 方法,还可以使用 CSS3 的 `@media print` 媒体查询来控制打印样式,从而实现 Element UI 动态表单的打印。
具体实现步骤如下:
1. 在需要打印的动态表单元素外包裹一个固定宽度的容器元素,并设置容器元素的样式如下:
```css
.print-container {
width: 794px; /* A4 纸宽度 */
margin: 0 auto; /* 居中显示 */
overflow: hidden; /* 隐藏容器元素外部内容 */
}
```
2. 在样式表中添加 `@media print` 媒体查询,并在其中设置打印样式。
```css
@media print {
/* 隐藏容器元素外部内容 */
body * {
visibility: hidden;
}
.print-container,
.print-container * {
visibility: visible;
}
/* 重新定义表单元素样式 */
.el-form-item {
margin-bottom: 10px;
}
.el-form-item__label {
font-size: 14px;
font-weight: bold;
width: 120px;
}
.el-form-item__content {
font-size: 14px;
}
}
```
上述代码中,`@media print` 媒体查询中将所有元素的可见性设为隐藏,然后将打印容器元素及其子元素的可见性设为可见,这样就只会打印出容器元素及其内部的元素。
另外,为了让打印出来的表单更易于阅读,还可以重新定义表单元素的样式,如调整字体大小、设置粗体、设置标签宽度等。
3. 在打印按钮的点击事件中调用 `window.print()` 方法。
```html
<template>
<div>
<div class="print-container">
<el-form ref="form" :model="form" label-width="120px">
<!-- 动态表单内容 -->
</el-form>
</div>
<el-button type="primary" @click="print">打印</el-button>
</div>
</template>
<script>
export default {
methods: {
print() {
window.print();
}
}
}
</script>
```
这样就可以通过 `@media print` 媒体查询来控制打印样式,实现 Element UI 动态表单的打印了。
阅读全文