vue-table-print

一个强大的Vue 3表格打印工具，支持ElementPlus、Ant Design Vue等主流UI组件库。

特性

• 🚀 Vue 3 + TypeScript - 完整的类型支持
• 📱 响应式设计 - 适配不同屏幕和打印尺寸
• 🎨 高度可定制 - 支持自定义样式、水印、Logo等
• 📄 多种导出格式 - 支持打印、预览、导出HTML
• 🔧 灵活配置 - 丰富的配置选项满足不同需求
• 📦 轻量级 - 零依赖，体积小巧
• 🎯 易于使用 - 简单的API设计，快速上手

安装

# npm
npm install vue-table-print

# yarn
yarn add vue-table-print

# pnpm
pnpm add vue-table-print

快速开始

基础用法

<template>
  <div>
    <el-button @click="handlePrint">打印表格</el-button>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="department" label="部门" />
    </el-table>
  </div>
</template>

<script setup>
import { useTablePrint } from 'vue-table-print'

const { printTable } = useTablePrint({
  title: '员工信息表'
})

const tableData = [
  { name: '张三', age: 28, department: '技术部' },
  { name: '李四', age: 32, department: '产品部' }
]

const columns = [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄', align: 'center' },
  { prop: 'department', label: '部门' }
]

const handlePrint = async () => {
  const result = await printTable(tableData, columns)
  if (!result.success) {
    console.error('打印失败:', result.message)
  }
}
</script>

类实例用法

import { TablePrintUtil } from 'vue-table-print'

const printUtil = new TablePrintUtil({
  title: '数据报表',
  pageSize: 'A4',
  orientation: 'landscape'
})

// 打印表格
await printUtil.printTable(data, columns)

// 预览表格
printUtil.previewTable(data, columns)

// 导出HTML
printUtil.exportToHTML(data, columns, 'report.html')

API参考

PrintOptions 配置选项

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | string | '数据表格' | 打印标题 | | showHeader | boolean | true | 是否显示页头 | | showFooter | boolean | true | 是否显示页脚 | | pageSize | 'A4' | 'A3' | 'A5' | 'Letter' | 'A4' | 页面尺寸 | | orientation | 'portrait' | 'landscape' | 'portrait' | 页面方向 | | margins | string | '1cm' | 页面边距 | | fontSize | string | '12px' | 字体大小 | | headerStyle | object | - | 表头样式配置 | | customStyles | string | '' | 自定义CSS样式 | | watermark | string | '' | 水印文字 | | logo | string | '' | Logo图片URL |

TableColumn 列配置

| 参数 | 类型 | 说明 | |------|------|------| | prop | string | 数据字段名 | | label | string | 列标题 | | align | 'left' | 'center' | 'right' | 对齐方式 | | width | number | string | 列宽度 | | formatter | function | 格式化函数 |

方法

useTablePrint(options?)

组合式函数，返回打印相关方法。

const { printTable, previewTable, exportToHTML } = useTablePrint(options)

printTable(data, columns, options?)

打印表格数据。

• data: any[] - 表格数据
• columns: TableColumn[] - 列配置
• options: Partial<PrintOptions> - 可选配置
• 返回: Promise<PrintResult> - 打印结果

previewTable(data, columns, options?)

预览表格打印效果。

exportToHTML(data, columns, filename?, options?)

导出为HTML文件。

高级用法

自定义格式化

const columns = [
  {
    prop: 'salary',
    label: '薪资',
    align: 'right',
    formatter: (row, column, value) => `￥${value.toLocaleString()}`
  },
  {
    prop: 'status',
    label: '状态',
    formatter: (row) => row.status === 1 ? '在职' : '离职'
  }
]

添加水印和Logo

const { printTable } = useTablePrint({
  title: '机密文档',
  watermark: '内部资料',
  logo: '/path/to/company-logo.png'
})

自定义样式

const customOptions = {
  customStyles: `
    .print-table th {
      background-color: #1890ff !important;
      color: white !important;
    }
    .print-table td {
      border-color: #1890ff !important;
    }
  `
}

await printTable(data, columns, customOptions)

横向打印大表格

await printTable(data, columns, {
  orientation: 'landscape',
  pageSize: 'A3',
  fontSize: '10px'
})

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

常见问题

Q: 为什么打印窗口被拦截？

A: 现代浏览器会拦截弹窗，请允许当前网站的弹窗权限。

Q: 如何自定义打印样式？

A: 使用 customStyles 选项添加自定义CSS，或通过 headerStyle 配置表头样式。

Q: 支持哪些UI组件库？

A: 本库是UI组件库无关的，支持ElementPlus、Ant Design Vue、Naive UI等所有Vue 3组件库。

贡献

欢迎提交 Issue 和 Pull Request！

License

MIT License

更新日志

v1.0.6

• 🎉 首次发布
• ✨ 支持基础打印功能
• ✨ 支持预览和导出HTML
• ✨ 完整的TypeScript支持