vue-print-nb 打印el-dialog下带滚动条的el-table
时间: 2023-07-21 22:42:48 浏览: 257
vue-print-nb 兼容低版本浏览器
要在el-dialog下打印带滚动条的el-table,可以使用vue-print-nb插件结合一些CSS样式来实现。
首先,在el-dialog的模板中,给el-table和el-dialog添加一个唯一的id属性:
``` html
<el-dialog title="打印内容" :visible.sync="dialogVisible" :close-on-click-modal="false">
<div id="printArea">
<el-table id="printTable" :data="tableData" style="width: 100%" height="300">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</el-dialog>
```
接着,在打印按钮的点击事件中,使用vue-print-nb插件的print方法,并添加一些CSS样式:
``` javascript
import Vue from 'vue'
import VuePrintNB from 'vue-print-nb'
Vue.use(VuePrintNB)
export default {
data() {
return {
dialogVisible: false,
tableData: [
{ name: '张三', age: 18, address: '北京市朝阳区' },
{ name: '李四', age: 22, address: '上海市浦东新区' },
{ name: '王五', age: 30, address: '广州市天河区' }
]
}
},
methods: {
handlePrint() {
// 打印内容
const printContent = document.getElementById('printArea').innerHTML
// 打印配置
const printConfig = {
title: '',
footer: '',
style: `
#printTable {
width: 100%;
}
#printTable .cell {
padding: 10px;
font-size: 14px;
text-align: center;
border: 1px solid #ddd;
}
#printTable .cell .cell {
padding: 0;
text-align: left;
}
#printTable .cell.el-tooltip {
display: none;
}
#printTable .cell .cell {
padding: 0;
text-align: left;
}
#printTable .cell .cell .cell {
padding: 0;
}
#printTable .cell .cell .cell .cell {
padding: 0;
}
#printTable .cell .cell .cell .cell .cell {
padding: 0;
}
#printTable .cell .cell .cell .cell .cell .cell {
padding: 0;
}
#printArea {
height: auto !important;
}
`
}
// 使用vue-print-nb插件的print方法打印
this.$print(printContent, printConfig)
}
}
}
```
在CSS样式中,需要设置打印的表格宽度为100%,并给表格的单元格添加一些样式,以保证打印出来的表格的格式正确。
另外,由于el-table在el-dialog中带有滚动条,所以还需要设置打印内容的高度为自动(height: auto !important),以保证打印出来的内容可以完整显示。
阅读全文