别再为el-table打印不全发愁了！手把手教你用PrintJS搞定Vue项目里的复杂表格打印
别再为el-table打印不全发愁了！手把手教你用PrintJS搞定Vue项目里的复杂表格打印
在Vue.js + Element UI的开发中，el-table作为数据展示的核心组件，其打印功能却常常成为开发者的噩梦——尤其是当表格列数较多时，打印预览中频繁出现的列截断问题让人抓狂。本文将带你深入剖析问题根源，并通过PrintJS的灵活运用，彻底解决这一顽疾。
1. 问题诊断：为什么el-table打印会"缺胳膊少腿"？
当我们在Chrome浏览器中按下Ctrl+P时，打印预览的渲染引擎与常规页面渲染存在本质差异。打印引擎会基于物理纸张尺寸（通常A4为210mm×297mm）进行内容裁剪，而el-table默认的table-layout: fixed布局方式会强制平分列宽，导致超宽表格右侧内容被无情截断。
通过DevTools审查打印样式时会发现两个关键现象：
- 打印媒体查询(
@media print)下的样式优先级高于常规CSS el-table的width: 100%声明在打印视口中可能被计算为实际物理宽度
典型错误示例：
<el-table :data="tableData" style="width: 1200px"> <!-- 12列数据 --> </el-table>这种固定宽度写法在打印时必然导致内容溢出，因为A4纸的可打印区域宽度通常不足800px。
2. 基础解决方案：PrintJS的两种救急方案
2.1 方案一：智能缩放打印（推荐新手首选）
PrintJS提供的缩放功能可以自动适配内容宽度，这是最简单的应急方案：
import printJS from 'print-js' const printTable = () => { printJS({ printable: 'table-container', // 表格容器ID type: 'html', scanStyles: false, targetStyles: ['*'], // 继承所有基础样式 css: '/static/print.css', // 自定义打印样式 style: '@page { size: auto; margin: 5mm; }' // 页边距控制 }) }关键参数说明：
| 参数 | 类型 | 作用 | 推荐值 |
|---|---|---|---|
scanStyles | boolean | 是否扫描页面样式 | false |
targetStyles | array | 需要保留的样式 | ['*'] |
css | string | 外部打印样式表路径 | 自定义路径 |
style | string | 内联打印样式 | @page规则 |
提示：缩放方案虽然简单，但在处理超多列表格时可能导致字体过小影响阅读，此时需要结合CSS媒体查询优化。
2.2 方案二：动态表格布局切换（适合复杂场景）
通过媒体查询动态切换表格布局方式，需要修改el-table的底层样式：
/* print.css */ @media print { /* 重置表格布局算法 */ .el-table { table-layout: auto !important; } /* 保证表头表体同宽 */ .el-table__header, .el-table__body { width: 100% !important; } /* 防止单元格内容换行 */ .el-table__cell { white-space: nowrap; } }多表格隔离方案： 当页面存在多个表格时，需要通过ID选择器精确控制：
<el-table id="report-table"></el-table> <style> @media print { #report-table table { table-layout: auto !important; } /* 其他表格保持原有布局 */ .el-table:not(#report-table) { table-layout: fixed !important; } } </style>3. 进阶技巧：专业级打印方案实现
3.1 分页表格打印控制
当表格行数过多需要分页时，通过CSS控制分页行为：
@media print { /* 保证表头每页重复 */ .el-table__header-wrapper { display: table-header-group; } /* 避免行内分页 */ .el-table__row { page-break-inside: avoid; } /* 分页间距调整 */ @page { margin: 1cm; size: A4 landscape; /* 横向打印 */ } }3.2 自定义页眉页脚
通过PrintJS的header和footer配置实现：
printJS({ printable: 'table-container', type: 'html', header: `<div class="custom-header"> <h3>${document.title}</h3> <p>打印日期：${new Date().toLocaleDateString()}</p> </div>`, footer: '<div class="page-footer">第{{page}}页/共{{totalPages}}页</div>', style: ` .custom-header { text-align: center; margin-bottom: 10px; } .page-footer { font-size: 10pt; text-align: right; } ` })3.3 大数据量表格优化
当处理万级数据表格时，建议采用分块打印策略：
const chunkSize = 50; // 每页50行 const printChunk = (data, index = 0) => { const chunk = data.slice(index, index + chunkSize); // 动态渲染表格区块 document.getElementById('print-area').innerHTML = ` <table> <thead>...</thead> <tbody> ${chunk.map(row => `<tr>...</tr>`).join('')} </tbody> </table> `; printJS({ printable: 'print-area', type: 'html', onPrintDialogClose: () => { if (index + chunkSize < data.length) { printChunk(data, index + chunkSize); } } }); }4. 实战对比：不同场景下的方案选型
| 场景特征 | 推荐方案 | 优点 | 缺点 |
|---|---|---|---|
| 简单表格(<10列) | 默认缩放 | 零配置 | 无法精细控制 |
| 复杂表格(10-20列) | 布局切换+横向打印 | 保持可读性 | 需要CSS调优 |
| 超宽表格(20+列) | 分区块打印 | 确保内容完整 | 需要额外开发 |
| 多表格混合 | ID选择器隔离 | 精准控制 | 维护成本高 |
| 大数据量(1000+行) | 分块打印 | 避免内存溢出 | 打印次数多 |
5. 避坑指南：那些年我踩过的打印坑
样式污染问题：在Vue单文件组件中始终使用
scoped样式，避免打印样式影响全局<style scoped> /* 安全样式区域 */ </style>图片加载异常：确保所有图片资源使用绝对路径，或通过base64嵌入
.logo { background-image: url('data:image/png;base64,...'); }分页符控制：使用CSS精确控制分页位置
.page-break { page-break-after: always; }字体回退方案：打印专用字体栈配置
body { font-family: "PrintFont", Arial, sans-serif; }打印按钮防抖：避免重复点击导致多次打印
const print = _.debounce(() => { printJS({...}) }, 500);
在最近的一个ERP系统项目中，我们通过组合使用横向打印、动态列宽调整和分块加载技术，成功打印出了包含35列、2000余行数据的采购报表。关键是在@media print查询中设置了transform: scale(0.9)配合width: 110%，既保证了内容完整又维持了可读性。