需求

打印Element-UI el-table组件渲染的表格。

总体布局

整体采用居中布局，表格宽度设置为1000px。表格宽度应该根据打印的纸张大小设置，过大会导致表格打印时显示不全，过小则不能充分利用纸张空间。我用A4纸打印设置宽度1000px刚好。

1. 静态页面

<template><div class="print-container"><h1 style="text-align: center">员工信息表</h1><el-table:data="tableData"style="width: 100%"border><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="gender"label="性别"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="phone"label="手机"></el-table-column></el-table><div class="print-button-container"><el-button type="primary" icon="el-icon-printer">打印</el-button></div></div>
</template><script>
export default {name: 'Print',props: {msg: String},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',gender: '男',address: '上海市普陀区金沙江路 1518 弄',phone: '19029384851'}, {date: '2016-05-04',name: '王小虎',gender: '男',address: '上海市普陀区金沙江路 1517 弄',phone: '19029384851'}, {date: '2016-05-01',name: '王小虎',gender: '男',address: '上海市普陀区金沙江路 1519 弄',phone: '19029384851'}, {date: '2016-05-03',name: '王小虎',gender: '男',address: '上海市普陀区金沙江路 1516 弄',phone: '19029384851'}]}}
}
</script>
<style scoped>.print-container {width: 1000px;margin: 0 auto;}.print-button-container {display: flex;justify-content: flex-end;margin-top: 15px;}
</style>

表格效果：

2. 调用浏览器的打印方法

    <div class="print-button-container"><el-button type="primary" icon="el-icon-printer" @click="handlePrint">打印</el-button></div>

/*** 调用浏览器的打印方法
*/
handlePrint() {window.print()
}

打印预览：

可以看到，el-table默认的边框样式在打印时并不怎么清晰，右边框和底部边框还出现了丢失；顶部和底部出现了页眉和页脚；打印按钮也没去掉。接下来将逐步优化打印的效果。

表格样式

首先来优化el-table的样式

/*字体调黑*/
>>> .el-table {font-size: 16px;color: #000000;
}>>> .el-table th {font-weight: normal;font-size: 18px;
}>>> .el-table thead {color: #000000;
}/*边框调黑*/
>>> .el-table::before {background-color: #000000;
}>>> .el-table--border::after {background-color: #000000;
}>>> .el-table--border th, >>> .el-table--border td {border-color: #000000;
}>>>.el-table--group, >>>.el-table--border {border-color: #000000;
}>>> .el-table th.is-leaf, >>> .el-table td {border-bottom: 1px solid #000000;
}/*减小单元格间距*/
>>> .el-table th, >>> .el-table td {padding: 0 0;
}
/*显示底部边框 估计打印时伪元素把border覆盖了 height设为0隐藏伪元素*/
>>> .el-table::before {height: 0;
}/*显示右边框*/
>>> .el-table--group::after, >>> .el-table--border::after {width: 0;
}

打印预览：

可以看到，优化后的表格更加清晰简洁，接下来还要设置一些特殊的，只在打印时生效的样式。

打印样式

通过@media print媒体查询设置打印时生效的一些样式：删除“打印”按钮，删除默认的页眉页脚，布局设置为纵向。

@media print {@page {/* 纵向打印 */size: portrait;/* 横向打印 *//*size: landscape;*//* 去掉页眉页脚*/margin-top: 0;margin-bottom: 0;}/*打印不显示打印按钮*/.print-button-container {display: none !important;}
}

打印预览

到此为止，打印的任务大功告成！！
完整demo: https://github.com/memory1668/el-table-print
参考: window.print() 前端实现网页打印详解

Element-UI el-table组件表格打印相关推荐

vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
使用vue-print-nb打印element table时表格打印不全的问题
elment的表格设置宽度为100%之后打印还是不能将表格打印完整如下图 1.寻找问题为什么会出现这种情况,打开控制台查看代码原来是el-table 会计算100%宽度为具体多少px 然后再计算 ...
element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图解决方法: Step1:在app.vue中加入css样式 <st ...

Element-UI el-table组件表格打印

需求