效果如下图,点击打印按钮即可弹出打印窗口,渲染出要打印的表格。
js代码:
注:调取打印机很简单,只需要一句代码即可 window.print()
把下面这段放在前端js代码的表格渲染里,替换掉原来的操作列
{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate,buttons:[
{
name: '打印',
title: __('打印'),
text:'打印',
classname: 'btn btn-xs btn-success btn-magic btn-click',
icon: 'fa fa-magic',
click: function (row, value) {
console.log('value: ', value);
for (const key in value) {
if (Object.hasOwnProperty.call(value, key)) {
const ele = value[key];
if(ele){
if(typeof ele == 'string' && ele.indexOf('http')===0){
$('td[name="'+key+'"]').html('<img src="'+ele+'"/>')
}
else{
$('td[name="'+key+'"]').text(ele)
}
}
}
}
setTimeout(() => {
window.print()
}, 1000);
},
}
]},
css代码
<style>
.print_area{
display: none;
}
.print_area table{
border-collapse: collapse;
}
.print_area td{
border: 1px solid #000;
padding: 6px 5px;
width: 200px;
}
.print_area .title{
width: 100px;
}
@media print{
.panel-default{
display: none;
}
.print_area{
display: block;
}
}
</style>
html代码
<div class="print_area">
<h1>测试打印</h1>
<table>
<tr>
<td class="title">编号</td>
<td name="name"></td>
<td class="title">日期</td>
<td name="content"></td>
<td class="title">院址</td>
<td name="createtime"></td>
<td class="title">科室名称</td>
<td name="test"></td>
</tr>
<tr>
<td class="title">编号</td>
<td name="name"></td>
<td class="title">日期</td>
<td name="content"></td>
<td class="title">院址</td>
<td name="createtime"></td>
<td class="title">科室名称</td>
<td name="abc"></td>
</tr>
<tr>
<td class="title">编号</td>
<td name="name"></td>
<td class="title">日期</td>
<td name="content"></td>
<td class="title">院址</td>
<td name="createtime"></td>
<td class="title">科室名称</td>
<td name="abc"></td>
</tr>
<tr>
<td class="title">编号</td>
<td name="name"></td>
<td class="title">日期</td>
<td name="content"></td>
<td class="title">院址</td>
<td name="createtime" colspan="3"></td>
</tr>
<tr>
<td class="title" colspan="8" style="text-align: center;">编号</td>
</tr>
<tr>
<td name="createtime" colspan="8" style="text-align: center;height: 100px;"></td>
</tr>
<tr>
<td class="title" colspan="8" style="text-align: center;">测试图片</td>
</tr>
<tr>
<td name="test" colspan="8" style="text-align: center;height: 100px;"></td>
</tr>
</table>
</div>
© 版权声明
Comments