v-table-print-js

Vue 3 表格打印 npm 包。调用方只传表格列和数据，分页、纸张、边框、字号、行高、页码和打印样式会自动处理。

安装

npm install v-table-print-js

全局注册

import { createApp } from 'vue';
import VueTablePrint from 'v-table-print-js';

createApp(App).use(VueTablePrint, {
  page: { size: 'A4', orientation: 'portrait', margin: '8mm' },
});

插件默认值会与每次 printTable() 入参合并。需要自动分页时，不要在插件里设置 rowsPerPage，否则所有打印都会固定行数并跳过自动测算。

最简打印

import { useTablePrint } from 'v-table-print-js';

const { printTable } = useTablePrint();

await printTable({
  title: '药品清单',
  columns: [
    { title: '名称', key: 'name' },
    { title: '规格', key: 'spec' },
    { title: '数量', key: 'quantity', align: 'right' },
  ],
  data: [
    { name: '阿莫西林', spec: '0.25g', quantity: 2 },
    { name: '布洛芬', spec: '0.2g', quantity: 1 },
  ],
});

无需额外引入 CSS。printTable() 会临时创建打印 DOM、注入打印样式、调用 print-js，结束后清理临时节点。

常用配置

await printTable({
  title: '药品清单',
  showPageNumber: true,
  truncate: true,
  page: { size: 'A4', orientation: 'landscape', margin: '10mm' },
  fontSize: '12px',
  titleSize: '22px',
  rowHeight: '26px',
  header: ['病区：内科', '科室：门诊', '单号：001', '打印人：张三', '时间：2026-06-17'],
  footer: [
    { label: '审核人', value: '李四' },
    { label: '发药人', value: '王五' },
    { label: '页数', value: '自动分页' },
    { label: '备注', value: '无' },
  ],
  columns: [
    { title: '名称', key: 'name', width: '35%' },
    { title: '规格', key: 'spec' },
    {
      title: '数量',
      key: 'quantity',
      align: 'right',
      formatter: (value) => `${value}盒`,
    },
    { title: '备注', key: 'remark' },
  ],
  data,
});

功能说明

纸张与页面

| 配置项 | 说明 | 默认值 | |--------|------|--------| | page.size | 纸张尺寸，支持 A4 / A5 | A4 | | page.orientation | 打印方向，portrait / landscape | portrait | | page.margin | 页边距，如 8mm、10mm | 8mm | | containerWidth | 打印内容宽度，横向默认 100% | 纵向 700px，横向 / A5 纵向 100% | | fontSize | 表格基础字号 | 12px | | titleSize | 标题字号 | 20px | | rowHeight | 行高 | 26px | | zoom | 缩放 | 100% |

请在代码里通过 page.size 指定纸张，并与浏览器打印对话框中的纸张设置保持一致；只改对话框而不改配置，会导致分页行数不准确。

自动分页

未传 rowsPerPage 时，库会在打印前实测页眉、表头、页脚和单行高度，结合纸张可打印区域自动计算每页行数，并通过多次挂载样本页校验，尽量让每逻辑页对应一张物理页。

• 适合默认 truncate: true、行高固定的场景
• 若 truncate: false 且内容会换行撑高，实际每页能放的行数可能更少，建议手动传 rowsPerPage
• 需要固定分页时，在单次调用里传 rowsPerPage: 5 即可

页眉与页脚

header 和 footer 支持三种写法：

1. HTML 字符串：直接渲染富文本
2. 三段对象：{ left, center, right }
3. 数组：字符串或 { label, value }，自动均分宽度，首项靠左、末项靠右、中间居中

页脚可配合 showPageNumber: true 显示「第 X/Y 页」。

列配置

| 配置项 | 说明 | |--------|------| | title | 表头文字 | | key | 数据字段名 | | width | 列宽，如 35%；未设置时自动均分 | | align | 对齐方式：left / center / right | | formatter | 格式化函数 (value, row, rowIndex) => string | | truncate | 是否截断，默认跟随顶层 truncate | | wrap | 是否换行；wrap: true 等价于 truncate: false |

截断规则

默认开启截断（truncate: true）。超出列宽时按 word-break: break-all 在列宽内裁切，不显示省略号。

• 顶层 truncate: false：关闭所有列截断，换行打印完整内容
• 列级 truncate / wrap：可单独覆盖某一列

单元格样式

列配置支持三层样式，均通过内联 style 注入，可覆盖默认打印 CSS（如 fontSize、padding、color 等）：

columns: [
  {
    title: '金额',
    key: 'amount',
    align: 'right',
    style: { fontSize: '13px', padding: '0 6px', fontWeight: '600' },
    headerStyle: { fontSize: '11px', padding: '0 2px' },
    cellStyle: (value, row, rowIndex) =>
      Number(value) >= 100 ? { color: '#b45309', fontWeight: '700' } : undefined,
  },
]

| 属性 | 作用范围 | 说明 | |------|----------|------| | style | 该列所有表体单元格 | 列级固定样式，每行相同 | | headerStyle | 该列表头单元格 | 未设置时沿用 style | | cellStyle | 该列表体单元格（按行） | 函数，根据 value / row / rowIndex 动态返回样式，与 style 合并，后者优先级更高 |

表头不走 cellStyle。若某列字号明显大于全局 rowHeight，可适当调大 rowHeight 避免内容被裁切。

组件预览

<template>
  <PrintTable :options="options" />
</template>

PrintTable 可用于页面内预览；实际打印更推荐使用 useTablePrint()，它会自动处理隐藏容器和样式生命周期。

开发

npm install
npm test
npm run typecheck
npm run build

综合测试数据位于 tests/fixtures/comprehensivePrintFixture.ts，示例项目 examples/vue3 已接入，可手动验证 A4/A5、自动分页、页眉页脚、formatter、截断、单元格样式、横向打印等能力。