elementui动态表单不用插件怎么打印
时间: 2023-12-07 20:14:17 浏览: 57
dynamic-form-advanced:基于vue和ElementUI的多级联动态表单
如果不想使用第三方库,可以使用浏览器自带的 `window.print()` 方法来实现 Element UI 动态表单的打印。具体实现步骤如下:
1. 在需要打印的动态表单元素外包裹一个固定宽度的容器元素,并设置容器元素的样式如下:
```css
.print-container {
width: 794px; /* A4 纸宽度 */
margin: 0 auto; /* 居中显示 */
overflow: hidden; /* 隐藏容器元素外部内容 */
}
```
2. 给容器元素添加打印按钮,并在按钮的点击事件中调用 `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>
```
3. 打印时需要注意一些样式问题,如去除背景色、调整字体大小等。可以在样式表中添加以下打印样式:
```css
@media print {
.print-container {
background-color: white !important; /* 去除背景色 */
}
.el-form-item__label {
font-size: 14px !important; /* 调整字体大小 */
}
}
```
这样就可以通过浏览器自带的 `window.print()` 方法实现 Element UI 动态表单的打印了。
阅读全文