1.表格打印不全
1.1.table宽度问题
因为el-table是js计算了合适的宽度然后动态设置table的width的:
但是打印的时候就这个固定的witdh就不适用于页面的宽度了,所以可以把table宽度设置为100%,同时把table-layout设置为auto。注意如果使用了scoped,scss需要加::v-deep
进行样式穿透,此外element ui是设置的行内样式width,所以了我在这里干脆设置了优先级为!important
。(参考:vue 中 vue-print-nb 表格打印不全的问题_vue-print-nb打印form不全_小手挥挥的博客-CSDN博客)
::v-deep table {
table-layout: auto;
}
::v-deep .el-table__header-wrapper .el-table__header {
width: 100% !important;
}
::v-deep .el-table__body-wrapper .el-table__body {
width: 100% !important;
}
1.2.show-overflow-tooltip问题
此外如果el-table设置了show-overflow-tooltip
为true的话,即使设置了以上的的样式,还是会有打印不全的问题,而且会出现表头可以打印完全,但表体宽度超过页面宽度的情况。所以如果设置了show-overflow-tooltip
为true,则还需设置以下样式:
::v-deep .el-table .cell.el-tooltip {
text-overflow: clip;
white-space: normal;
min-width: none;
width: auto !important;
border: none !important;
}
2.表头错位
el-table是用两个table标签来组装成一个表格的,表头是一个table,表体是一个table。
因为我们在第一步设置了table-layout为auto,所以两个表格的边框会有错位的现象。(我用的别人的图,来源:element - 如何解决使用vue-print-nb打印el-table出现表头和数据列边框错位? - SegmentFault 思否)
发现了一个现象,当原本页面上的el-table宽度超过页面宽度、x方向有滚动条时,直接打印就不会有表头错位问题,看了一下el-table表体table的overflow
设置的时auto,但我试了一下设置为visible或hidden,el-table宽度没超过页面时直接打印,表头还是会错位,所以不知道这里的原因。
我的解决方法是把表头数据插入到表体数据的最开始,让表头数据在表体table的第一行,然后把el-table的原本的表头隐藏起来,这样表头数据显示在原本的表体第一行,也就相当于有表头了。表头和表体都在一个table标签里,就不会出现表头错位问题了。
比如表头是【 姓名 | 年龄 | 住址 | 性别 】,原本的表格数据如下:
tableData: [
{
name: "张三",
age: 50,
address: "中国",
gender: "01"
},
{
name: "李四",
age: 66,
address: "外国",
gender: "02"
},
...
]
那么可以把数据改造成这样:
tableData: [
// 数组的第一个元素就是表头的信息
{
name: "姓名",
age: "年龄",
address: "住址",
gender: "性别"
},
// 下面才是原本的表体的数据
{
name: "张三",
age: 50,
address: "中国",
gender: "01"
},
{
name: "李四",
age: 66,
address: "外国",
gender: "02"
},
...
]
再把el-table的show-header
属性设置为false
,这样就不会有表头错位问题了。
下面是我写的一个专门用于打印的表格组件的部分代码(纯手打,有错,不要直接复制粘贴):
<template>
<el-table
:id="id
:data="tableData"
border
:show-header="false" // 隐藏表头
:row-class-name="handleRowClass" // 设置第一行的样式,使其看起来像表头
>
<el-table-column
v-for="col in column"
:key="col.prop || col.label
:label="col.label || ''"
:prop="col.prop"
>
... // 这里可以不写,也可以根据实际情况按字典翻译啥的
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "PrintTable",
props: {
// 用vue-print-nb组件唤起打印需要指定打印元素的id
id: {
type: String,
default: null
},
// 表格数据(不含表头)
data: {
type: Array,
default: () => []
},
// 表格列信息,数据结构是[{prop: "xx", label: "yy"},{...},...]
columns: {
type: Array,
default: () => []
},
},
data() {
return {
// 含表头数据的表格数据
tableData: []
}
},
watch: {
// 监听表格数据,在其开始插入表头行数据
data: {
handler(newVal, oldVal) {
const header = {};
this.columns.forEach(col => {
header[col.prop] = col.label;
});
this.tableData = [header, ...this.data];
},
deep: true,
immediate: true
}
},
methods: {
// 设置第一行的类名
handleRowClass({row, rowIndex}) {
if(rowIndex === ) return "print-table-header";
else return "";
}
}
}
</script>
3.修改边框样式
我们的要求是显示所有边框,并且都为1px宽的黑色。然后遇到了原始边框样式在干扰的问题,仔细查看发现el-table的边框有些是用after、before做的,所以需要清除掉。
有两种方式:
-
设置el-table的border为true,且利用
cell-style
和header-cell-style
属性改变边框颜色,然后在最外层加边框,具体可参考elementui 更改 el-table 表头样式及修改el-table表格边框的注意事项_el-table边框-CSDN博客,这种方式打印预览的表格外层边框会和单元格边框对不拢,第二种方法更好一些。 -
直接粗暴地更改样式,并设置优先级最高
// 设置表格边框样式
::v-deep table {
table-layout: auto;
border: 1px solid black !important;
border-color: black !important;
border-collapse: collapse;
font-size: 8px !important;
color: black !important;
td {
border: 1px solid black !important;
}
th {
border: 1px solid black !important;
border-bottom: none !important;
width: auto !important;
}
}
// 清楚原来的边框样式
::v-deep .el-table--border::after,
.el-table--group::after
.el-table::before {
background-color: transparent;
}
::v-deep .el-table::before {
height: 0px;
}
::v-deep .el-table--border::after {
width: 0px;
}
::v-deep el-table--border {
border: none;
}
::v-deep .el-table--group::after,
el-table--border::after {
width: 0;
}
::v-deep .el-table--group,
el-table--border border {
border: none !important;
}
(参考el-table去掉最外层的边框线 - pz_ww - 博客园 (cnblogs.com))
4.去掉空白页
主要是设置html的样式:
html {
margin: 0px;
height: auto;
}
body {
border: solid 1px white;
margin: 10mm 15mm 10mm 15mm;
}
参考自解决vue-print-nb打印时多出一页空白,vue-print-nb打印有空白页-CSDN博客
注意以上所有的样式都需要在@media print{}
里写哈
ok,以上就是我用vue-print-nb打印el-table的各种坑,有些不对的地方还请说出来一起交流