vue3-print-el-table
v0.1.2
Published
Vue 3 print directive for Element Plus tables — renders a native <table> for reliable printing (many columns, hidden columns).
Downloads
421
Maintainers
xlei1123Readme
vue3-print-el-table
面向 Element Plus el-table 的打印方案：在隐藏 iframe 中写入文档并调用 window.print()（思路与 vue3-print-nb 一致）。
el-table 在打印时常见问题是多列、固定列、隐藏列等场景下 div + 多段表格布局 容易错位；本库在打印前把 当前列与行数据 序列化为 原生 <table>，一般可获得稳定、可分页的打印效果。
多级表头（Grouping table head）：表头结构与 Element Plus 内部一致，按 store.states.originColumns 列树调用与 table-header/utils-helper 相同的 convertToRows 逻辑，生成带 colspan / rowspan 的 <thead>。
安装
npm install vue3-print-el-table需已安装 vue 与 element-plus（peerDependencies）。
编程式调用（推荐）
无需注册指令，在任意逻辑里直接调用即可：
import { printElTable } from 'vue3-print-el-table'
import type { TableInstance } from 'element-plus'
import type { Ref } from 'vue'
function printReport(tableRef: Ref<TableInstance | undefined>) {
const table = tableRef.value
if (!table) return
printElTable(table, {
popTitle: '报表',
bodySource: 'data',
beforeOpenCallback: () => {},
openCallback: () => {},
closeCallback: () => {},
})
}与 printElTable 等价的方法名（便于搜索）：printElementPlusTable。
常用参数
| 字段 | 说明 |
|------|------|
| includeHiddenColumns | 默认 false：跳过 hidden 的列及选择列、展开列；序号列（type="index"）会参与打印 |
| headerSource | labels（默认）：用列 label / 列树生成表头；插槽 #header、renderHeader 的展示不会进打印。dom：克隆当前页已渲染的 thead，可带上自定义表头；需 无左/右固定列（否则表头 DOM 可能不完整）；多级表头也可用。会尽量去掉排序箭头、筛选按钮。 |
| bodySource | auto（无左/右固定列时可尝试主表体 td 文本）、data、dom |
| popTitle | 打印页 <title> |
| extraCss | 额外样式表 URL，逗号分隔 |
| beforeOpenCallback / openCallback / closeCallback | 打印前后回调 |
| beforeTableHtml / afterTableHtml | 表格 上方 / 下方 追加的 HTML 片段（会包在 .ep-print-before / .ep-print-after 内） |
| beforeTableCss / afterTableCss | 分别写入打印页 <head> 的 <style>，便于只写「上方 / 下方」区域的样式 |
| printCss | 整页追加一段 CSS（可同时写 .ep-print-before、.ep-print-after、.ep-native-print-table 等） |
| printOrientation | 'portrait' 或 'landscape'：通过 @page { size: … } 建议打印方向（宽表常用横版）；不能在 JS 里强制系统打印对话框默认值，用户仍可改 |
HTML/CSS 由业务自行传入；若内容来自用户输入，请先做好转义或白名单。
仅需要表格 HTML 字符串（自行拼打印页）时，可使用 serializeElTableToHtml(table, options)，再用 wrapPrintTableHtml(tableHtml, { beforeTableHtml, afterTableHtml }) 包一层后交给 PrintArea 或自行 print()。
指令（可选）
适合模板里「点按钮就打印」：
import { createApp } from 'vue'
import { printElTablePlugin } from 'vue3-print-el-table'
const app = createApp(App)
app.use(printElTablePlugin)<el-button v-print-el-table="{ table: getTable, popTitle: '报表' }">打印</el-button>
<script setup lang="ts">
import { ref } from 'vue'
import type { TableInstance } from 'element-plus'
const tableRef = ref<TableInstance>()
const getTable = () => tableRef.value
</script>table 传入返回 ElTable 组件实例 的函数或实例本身（不要传整个 ref 对象）。
实现说明
- 表体列顺序与
store.states.columns（布局顺序）对齐；多级表头树来自store.states.originColumns（与 EP 表头组件相同数据源），过滤不可打印列后再convertToRows。 - 存在左/右固定列时，表体 DOM 拆在多张内部 table 里，
bodySource: 'auto'会回退为数据列（prop/formatter）。 - 多级表头下默认不使用
headerSource: 'dom'克隆 thead（避免与 EP DOM 不一致）；需要单层表头克隆时可设headerSource: 'dom'且无固定列。
License
MIT