告别 el-table 打印难题，vue3-print-el-table 来了！

前言

在 Vue3 + Element Plus 的后台管理项目中，表格打印是一个极其常见的需求------报表导出、数据归档、审批单据......几乎每个管理系统都绕不开这个功能。

然而，用过 el-table 的朋友都知道，打印这件事，远没有想象中那么简单。

痛点：el-table 打印的「三座大山」

1. 表格内容打印不全

el-table 的渲染依赖大量 div 布局和多层嵌套，在打印环境下，经常出现表格被截断、列丢失、内容显示不完整等问题。尤其是当表格包含固定列、多级表头时，错位和缺失几乎是家常便饭。

2. 样式严重失真

在屏幕上优雅美观的表格，到了打印预览里却变得面目全非------边框消失、字体错乱、颜色丢失。开发者不得不花费大量时间编写专门的 @media print 样式来补救。

3. 现有方案配置繁琐

目前社区常用的打印方案是 vue3-print-nb，但用它来打印 el-table 往往需要修改源码、拷贝文件到项目目录、添加钩子函数等一系列操作。这不仅增加了维护成本，还让代码变得臃肿不堪。

有没有一个开箱即用、专为 el-table 设计的打印方案？

解决方案：vue3-print-el-table

vue3-print-el-table 正是为此而生------一个专门面向 Element Plus el-table 的打印工具库 。

核心优势

1. 原生 table 渲染，稳定可靠

vue3-print-el-table 会在打印前将 el-table 的列与行数据序列化为原生 HTML <table> 标签 。原生表格在打印环境下表现稳定，天然支持分页，彻底告别 div 布局导致的截断和错位问题。

2. 开箱即用，零配置起步

无需修改源码、无需拷贝文件、无需额外样式补丁。安装后直接调用，即可获得高质量的打印效果。

3. 完美兼容 Element Plus

多级表头（Grouping table head）的渲染逻辑与 Element Plus 内部保持一致，自动处理 colspan 和 rowspan。固定列、隐藏列、序号列等场景均有良好支持。

快速上手

安装

bash

lua 复制代码

npm install vue3-print-el-table

需已安装 vue 与 element-plus（peerDependencies）。

编程式调用（推荐）

无需注册任何指令，在任意逻辑中直接调用即可：

typescript

typescript 复制代码

import { printElTable } from 'vue3-print-el-table'
import type { TableInstance } from 'element-plus'
import type { Ref } from 'vue'

function printReport(tableRef: Ref<TableInstance>) {
  const table = tableRef.value
  if (!table) return
  
  printElTable(table, {
    popTitle: '报表',
    bodySource: 'data',
    beforeOpenCallback: () => {},
    openCallback: () => {},
    closeCallback: () => {},
  })
}

运行

printElementPlusTable 是与 printElTable 等价的方法名，便于搜索和记忆

指令式调用（可选）

适合模板里「点按钮就打印」的场景：

typescript

javascript 复制代码

import { createApp } from 'vue'
import { printElTablePlugin } from 'vue3-print-el-table'

const app = createApp(App)
app.use(printElTablePlugin)

vue

xml 复制代码

<template>
  <el-button v-print-el-table="{ table: getTable, popTitle: '报表' }">
    打印
  </el-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const getTable = () => tableRef.value
</script>

运行

进阶配置

vue3-print-el-table 提供了丰富的配置选项，满足各种定制需求：

参数	说明
`includeHiddenColumns`	是否包含隐藏列，默认 `false`
`headerSource`	`'labels'`（默认）用列 label 生成表头；`'dom'` 克隆当前表头 DOM
`bodySource`	`'auto'`、`'data'`（用数据生成）、`'dom'`（克隆当前表体）
`popTitle`	打印页标题
`extraCss`	额外样式表 URL，逗号分隔
`beforeTableHtml` / `afterTableHtml`	表格上方/下方追加的 HTML 片段
`printCss`	整页追加的自定义 CSS
`printOrientation`	`'portrait'`（纵向）或 `'landscape'`（横向），宽表推荐横版

仅获取表格 HTML

如果只需要表格的 HTML 字符串（自行拼打印页），可以使用：

typescript

php 复制代码

import { serializeElTableToHtml, wrapPrintTableHtml } from 'vue3-print-el-table'

const tableHtml = serializeElTableToHtml(table, options)
const fullHtml = wrapPrintTableHtml(tableHtml, {
  beforeTableHtml: '<h2>报表标题</h2>',
  afterTableHtml: '<p>报表底部备注</p>',
})
// 自行调用 window.print() 或使用 PrintArea

写在最后

如果你正在为 el-table 的打印问题而烦恼，不妨试试 vue3-print-el-table：

✅ 专为 el-table 设计，不再需要手动修补样式
✅ 原生 table 渲染，打印效果稳定可靠
✅ 配置灵活，满足从简单到复杂的各种场景
✅ 开箱即用，告别修改源码的繁琐流程

项目地址：< $[github.com](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fxlei1123%2Fel-table-print "https://github.com/xlei1123/el-table-print")$ > 给个star

欢迎在评论区分享你的使用体验，或者提出遇到的问题～