PrintJS打印实战：从‘缩放按钮’到‘修改源码’，我是如何一步步优化el-table打印体验的

PrintJS打印实战：从‘缩放按钮’到‘修改源码’，我是如何一步步优化el-table打印体验的

那天下午，我正在为一个客户开发数据报表模块。当我在Chrome中按下Ctrl+P时，眼前的景象让我瞬间皱起了眉头——el-table右侧的几列数据神秘消失了，就像被什么无形的东西吞噬了一样。这可不是个小问题，我们的报表需要完整打印所有数据列。于是，一场关于PrintJS和el-table的深度调试之旅就此展开。

1. 初遇问题：打印时的列缺失现象

第一次发现这个问题时，我以为是打印机设置的问题。但当我切换到不同的打印机驱动，甚至在无头浏览器中测试时，问题依旧。这让我意识到，问题可能出在前端代码本身。

通过Chrome的打印预览工具，我注意到几个关键现象：

• 只有超过特定宽度的表格会出现列缺失
• 缺失的总是右侧的列
• 屏幕显示完全正常，仅打印时出现问题

典型的问题表现：

// 打印代码看起来很简单 printJS({ printable: 'report-table', type: 'html', style: '@page { size: A4; margin: 0; }' })

在排查过程中，我尝试了以下方法：

1. 调整打印边距
2. 修改纸张方向为横向
3. 添加CSS@media print样式

但无一奏效。这让我开始怀疑是不是PrintJS本身对表格宽度计算有特殊处理。

2. 第一道防线：PrintJS的缩放功能

在几乎要放弃的时候，我注意到PrintJS配置项中有一个不太起眼的参数：scale。文档中对此的描述很简略：

scale: 缩放比例，默认为1

缩放方案的实现代码：

printJS({ printable: 'report-table', type: 'html', scale: 0.8, // 关键参数 style: '@page { size: A4; margin: 0; }' })

这个方案确实解决了我的燃眉之急，但也带来了新问题：

提示：缩放方案适合临时解决，但不适合对打印质量要求高的场景

3. 深入核心：table-layout的陷阱

缩放方案不够完美，迫使我继续深挖。通过Chrome的审查元素，我对比了屏幕显示和打印时的样式差异，发现了一个关键点：

/* el-table生成的样式 */ .el-table { table-layout: fixed; }

这个table-layout: fixed属性就是罪魁祸首。它的设计初衷是：

• 提高表格渲染性能
• 确保列宽一致性
• 基于第一行确定所有行宽度

但在打印场景下，它会导致：

1. 表格宽度计算不考虑打印页面实际可用宽度
2. 列宽分配不够智能
3. 内容溢出时直接截断而非换行

样式覆盖方案：

@media print { .el-table { table-layout: auto !important; } .el-table__header, .el-table__body { width: 100% !important; } }

4. 方案优化：精准控制样式作用域

直接覆盖全局样式虽然有效，但在复杂项目中风险很大。我遇到过：

• 打印对话框中的表格样式错乱
• 页面其他表格布局异常
• 动态加载的表格受影响

更安全的实现方式：

1. 为需要特殊处理的表格添加唯一ID

<el-table id="report-table"></el-table>

2. 使用scoped样式精准控制

<style scoped> @media print { #report-table { table-layout: auto !important; } #report-table .el-table__header, #report-table .el-table__body { width: 100% !important; } } </style>

3. 考虑添加打印专用样式类

printJS({ printable: 'report-table', type: 'html', style: ` @page { size: A4; margin: 0; } .print-mode .el-table { table-layout: auto !important; } `, onLoadingStart: () => { document.getElementById('report-table').classList.add('print-mode') }, onLoadingEnd: () => { document.getElementById('report-table').classList.remove('print-mode') } })

5. 终极方案：修改PrintJS的打印逻辑

当项目中有多个复杂表格需要打印时，前面的方案可能还不够。这时，我们可以考虑直接修改PrintJS的打印逻辑。

核心修改点：

1. 克隆打印元素时保留原始样式
2. 自动检测表格宽度并调整
3. 添加智能缩放功能

// printJS增强版 function enhancedPrint(elementId, options = {}) { const originalElement = document.getElementById(elementId) const clone = originalElement.cloneNode(true) // 自动处理表格 const tables = clone.querySelectorAll('.el-table') tables.forEach(table => { table.style.tableLayout = 'auto' table.querySelectorAll('.el-table__header, .el-table__body') .forEach(el => el.style.width = '100%') }) // 临时添加到DOM const printContainer = document.createElement('div') printContainer.style.position = 'absolute' printContainer.style.left = '-9999px' printContainer.appendChild(clone) document.body.appendChild(printContainer) // 计算最佳缩放比例 const pageWidth = 794 // A4宽度(px) const contentWidth = clone.scrollWidth const optimalScale = contentWidth > pageWidth ? pageWidth / contentWidth * 0.95 : 1 // 调用原始printJS printJS({ printable: printContainer.innerHTML, type: 'html', scale: optimalScale, style: options.style || '@page { size: A4; margin: 0; }', onPrintDialogClose: () => { document.body.removeChild(printContainer) } }) }

这个方案结合了前面所有优点的同时，还增加了：

• 自动宽度检测
• 智能缩放计算
• 内存清理
• 样式隔离

6. 实战中的意外收获

在实现过程中，我还发现了一些有用的技巧：

打印样式优化清单：

1. 强制分页避免表格被截断

@media print { .page-break { page-break-after: always; } }

2. 隐藏不需要打印的元素

@media print { .no-print { display: none !important; } }

3. 调整打印背景和颜色

@media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

4. 优化文本打印

@media print { * { text-shadow: none !important; color: #000 !important; } }

性能对比表：

在项目后期，我们甚至开发了一个Vue指令来简化使用：

Vue.directive('print-optimized', { bind(el) { el.addEventListener('click', () => { const tableId = el.getAttribute('data-target') enhancedPrint(tableId) }) } })

使用时只需：

<button v-print-optimized>