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

news2025/5/23 14:20:41

🚀 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)}
        \${