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

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

githunb地址： https://github.com/zhoulongshao/vue-table-print/blob/main/README.MD

快速开始

基础用法

<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.0

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