当前位置：首页 > article >正文

Vue3 打印表格、Element Plus 打印、前端打印、表格导出打印、打印插件封装、JavaScript 打印、打印预览

article 2025/9/11 8:01:00

🚀 Vue3 高级表格打印工具封装（支持预览、分页、样式美化）

现已更新至npm 
# 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

关键词：Vue3 打印表格、Element Plus 打印、前端打印、表格导出打印、打印插件封装、JavaScript 打印、打印预览

在企业级应用中，我们经常遇到打印报表、导出数据的需求，今天分享一个基于 Vue3 封装的表格打印工具类，支持：

🖨️ 表格打印 & 预览
🎨 样式高度可定制
📄 分页支持
🧩 formatter 格式化器
✅ 可组合式 API（useTablePrint）

🧠 核心封装代码

// utils/tablePrint.js
// 高级表格打印工具类
export class TablePrintUtil {constructor(options = {}) {this.options = {title: '数据表格',showHeader: true,showFooter: true,pageSize: 'A4',orientation: 'portrait',margins: '1cm',fontSize: '12px',headerStyle: {backgroundColor: '#f5f7fa',color: '#333',fontWeight: 'bold'},...options}}async printTable(data, columns, customOptions = {}) {const finalOptions = { ...this.options, ...customOptions }try {const printContent = this.generateAdvancedHTML(data, columns, finalOptions)await this.executePrint(printContent, finalOptions)} catch (error) {console.error('打印失败:', error)throw error}}generateAdvancedHTML(data, columns, options) {const currentTime = new Date().toLocaleString('zh-CN')const totalPages = Math.ceil(data.length / 20)return \`<!DOCTYPE html><html><head><meta charset="utf-8"><title>\${options.title}</title><style>\${this.generatePrintStyles(options)}</style></head><body>\${options.showHeader ? this.generateHeader(options, currentTime) : ''}\${this.generateTableContent(data, columns, options)}\${