效果图
代码部分,简单三步
1,html部分:写一个表格,然后数据填进去
<div id="printable-area" v-show="false"><div><div style="text-align: center;height: 40px;line-height: 40px;font-size: 16px;">2024-06-06</div><table><thead><tr><th>科室</th><th>损伤性</th><th>感染性</th></tr></thead><tbody><tr><td>输液室</td><td>2.5</td><td>1.2</td></tr><tr><td>手术室</td><td>3.5</td><td>0.5</td></tr><tr><td>中医科</td><td>2.1</td><td>06</td></tr><tr><td>皮肤科</td><td>2.1</td><td>0.8</td></tr><tr><td>治疗区</td><td>3.4</td><td>0.9</td></tr><tr><td>总</td><td>13.6</td><td>4</td></tr></tbody></table></div></div>
2,css部分:把表格样式搞一搞
/* 打印显示样式 */
table { width: 100%; border-collapse: collapse;
} th, td { border: 1px solid black; padding: 8px; text-align: left;
}
3,js部分:这样复制过去就行了
print(divName) {var printContents = document.getElementById(divName).innerHTML;var originalContents = document.body.innerHTML;document.body.innerHTML = printContents;window.print();// 刷新页面防止不可以继续点打印window.location.reload()// 恢复页面内容 document.body.innerHTML = originalContents;},
4,点击打印按钮,搞定
<el-button size="small" @click="print('printable-area')" type="primary">打印</el-button>