vue-table-print

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

特性

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

安装

1# npm
2npm install vue-table-print
3
4# yarn
5yarn add vue-table-print
6
7# pnpm
8pnpm add vue-table-print

快速开始

基础用法

1<template>
2  <div>
3    <el-button @click="handlePrint">打印表格</el-button>
4    <el-table :data="tableData">
5      <el-table-column prop="name" label="姓名" />
6      <el-table-column prop="age" label="年龄" />
7      <el-table-column prop="department" label="部门" />
8    </el-table>
9  </div>
10</template>
11
12<script setup>
13import { useTablePrint } from 'vue-table-print'
14
15const { printTable } = useTablePrint({
16  title: '员工信息表'
17})
18
19const tableData = [
20  { name: '张三', age: 28, department: '技术部' },
21  { name: '李四', age: 32, department: '产品部' }
22]
23
24const columns = [
25  { prop: 'name', label: '姓名' },
26  { prop: 'age', label: '年龄', align: 'center' },
27  { prop: 'department', label: '部门' }
28]
29
30const handlePrint = async () => {
31  const result = await printTable(tableData, columns)
32  if (!result.success) {
33    console.error('打印失败:', result.message)
34  }
35}
36</script>

类实例用法

1import { TablePrintUtil } from 'vue-table-print'
2
3const printUtil = new TablePrintUtil({
4  title: '数据报表',
5  pageSize: 'A4',
6  orientation: 'landscape'
7})
8
9// 打印表格
10await printUtil.printTable(data, columns)
11
12// 预览表格
13printUtil.previewTable(data, columns)
14
15// 导出HTML
16printUtil.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?)

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

1const { 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文件。

高级用法

自定义格式化

1const columns = [
2  {
3    prop: 'salary',
4    label: '薪资',
5    align: 'right',
6    formatter: (row, column, value) => `￥${value.toLocaleString()}`
7  },
8  {
9    prop: 'status',
10    label: '状态',
11    formatter: (row) => row.status === 1 ? '在职' : '离职'
12  }
13]

添加水印和Logo

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

自定义样式

1const customOptions = {
2  customStyles: `
3    .print-table th {
4      background-color: #1890ff !important;
5      color: white !important;
6    }
7    .print-table td {
8      border-color: #1890ff !important;
9    }
10  `
11}
12
13await printTable(data, columns, customOptions)

横向打印大表格

1await printTable(data, columns, {
2  orientation: 'landscape',
3  pageSize: 'A3',
4  fontSize: '10px'
5})

浏览器兼容性

• 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支持