### 使用 `
vue-print
-nb` 打印 `
el-table` 常见问题解决方案
#### 一、
Table 序号打印错乱问题
当使用 `
vue-print
-nb` 打印 `
el-table` 时，如果发现
序号打印错乱，可以通过调整 CSS 样式来解决问题。具体方法如下：
通过设置 `
.el-table .el-table__c
ell
.is
-hidden > * { visibility: visible; font
-size: 12px; }` 可以确保隐藏的内容在打印时可见[^1]。
```css
::v
-deep
.el-table .el-table__c
ell
.is
-hidden > * {
visibility: visible;
font
-size: 12px;
}
```
---
#### 二、表格边框不显示问题
在打印过程中，由于默认情况下浏览器不会保留原有样式的边框效果，因此需要手动覆盖样式以确保边框正常显示。可以尝试以下方式解决此问题：
重新定义打印区域内的表格样式，例如添加 border 属性，并将其应用到目标组件上[^2]。
```css
@media print {
.el-table td,
.el-table th {
border: 1px solid #ebeef5 !important;
}
.el-table::before,
.el-table--border,
.el-table--group {
border
-color: #ebeef5 !important;
}
}
```
---
#### 三、表格打印不全问题
对于某些情况下的宽屏数据表，在实际打印时可能会因为页面宽度限制而无法完全展示所有列的数据。这是由于浏览器
计算的屏幕像素比例与物理打印机分辨率存在差异所致[^3]。
一种有效的办法是动态调整每列宽度或者固定整体布局尺寸，从而适应 A4 或其他标准纸张大小的要求。以下是实现代码片段的一个例子：
```
javascript
methods: {
handlePrint() {
this
.$nextTick(() => {
const
tableWidth = document
.queryS
elector('
.el-table')
.offsetWidth;
const colGroups = document
.queryS
electorAll('
.el-table>colgroup>col');
let totalWidth = 0;
Array
.from(colGroups)
.forEach((item) => {
item
.style
.width = `${(parseInt(item
.getAttribute('width')) /
tableWidth) * 793}px`;
totalWidth
+= parseInt(item
.style
.width);
});
console
.log(`Total adjusted width is ${totalWidth}`);
});
},
},
```
上述逻辑中，我们先获取整个表格的实际宽度，再按比例分配给各个子项的新宽度
值（假设最终输出介质为A4横向模式下最大可用空间约为793px）。这样即使原始设计超出常规范围也能较好适配硬件设备特性需求。
---
#### 四、
分页及自定义页脚处理
为了支持多页文档中的连续记录以及统计汇总功能，则需引入额外机制完成分割操作并附加相应信息至各独立区块底部位置处[^4]。
下面是一个简单的
Vue 模板实例演示如何利用循环渲染技术生成多个小型局部视图单元供后续组合拼接成完整的报告形式文件结构：
```html
<template>
<div id="print
-area">
<!
-- 动态创建若干个表格
-->
<
table v
-for="(chunk, index) in paginatedData" :key="index" class="my
-table">
<thead>
<tr>
<th v
-for="(header, hIndex) in headers" :key="'h'
+ hIndex">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v
-for="(row, rowIndex) in chunk" :key="'r'
+ rowIndex">
<td v
-for="(c
ell, c
ellIndex) in row" :key="'c'
+ c
ellIndex">{{ c
ell }}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="{{headers
.length}}">Page {{ index
+ 1 }} of {{ totalPages }}</td>
</tr>
</tfoot>
</
table>
</div>
</template>
<script>
export default {
data() {
return {
allRows: [], // 完整数据集
pageSize: 20, // 每页条目数量
};
},
computed: {
paginatedData() {
const result = [];
for (let i = 0; i < this
.allRows
.length; i
+= this
.pageSize) {
result
.push(this
.allRows
.slice(i, i
+ this
.pageSize));
}
return result;
},
totalPages() {
return Math
.ceil(this
.allRows
.length / this
.pageSize);
},
},
};
</script>
```
在此基础上还可以进一步扩展更多高级选项比如
自动累加总计数
值等功能模块满足特定业务场景下的复杂报表生成功能要求。
---
扫一扫
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
