首页
/ Element UI表格打印：Table打印功能实现

Element UI表格打印：Table打印功能实现

2026-02-05 05:49:47作者：仰钰奇
element
A Vue.js 2.0 UI Toolkit for Web
项目地址：https://gitcode.com/gh_mirrors/eleme/element

在日常办公和数据展示场景中，将表格数据打印成纸质文档或PDF是常见需求。Element UI（一套基于Vue.js 2.0的桌面端组件库）的Table组件虽然没有内置打印功能，但通过巧妙结合浏览器API和自定义样式，我们可以轻松实现专业的表格打印效果。本文将从场景痛点出发，提供两种实用的实现方案，并详解优化技巧，帮助开发者快速解决表格打印难题。

打印功能实现方案

原生打印API方案

利用浏览器内置的window.print() API是实现打印功能的基础方式。该方案的核心是通过CSS控制打印区域样式，隐藏非必要元素，确保表格在打印介质上正确显示。

实现步骤

  1. 添加打印按钮：在表格工具栏中添加打印触发按钮，绑定点击事件。
<template>
  <div class="table-container">
    <el-button type="primary" @click="handlePrint">打印表格</el-button>
    <el-table
      ref="printTable"
      :data="tableData"
      border
      style="width: 100%">
      <!-- 表格列定义 -->
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>
  1. 编写打印处理函数：在点击事件中调用打印API，并通过动态样式控制打印效果。
methods: {
  handlePrint() {
    // 获取表格DOM元素
    const table = this.$refs.printTable.$el;
    // 创建打印窗口
    const printWindow = window.open('', '_blank');
    // 复制表格内容到打印窗口
    printWindow.document.write(`
      <html>
        <head>
          <title>表格打印</title>
          <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
          <style>
            @media print {
              body * { visibility: hidden; }
              .print-container, .print-container * { visibility: visible; }
              .print-container { position: absolute; left: 0; top: 0; }
              /* 移除Element UI表格的滚动条 */
              .el-table__body-wrapper { overflow: visible !important; }
              /* 确保表格边框打印正常 */
              .el-table__row { border-collapse: collapse !important; }
            }
          </style>
        </head>
        <body>
          <div class="print-container">${table.outerHTML}</div>
        </body>
      </html>
    `);
    printWindow.document.close();
    // 等待资源加载完成后执行打印
    printWindow.onload = () => {
      printWindow.print();
      printWindow.close();
    };
  }
}
  1. 引入Element UI样式：确保打印窗口中加载Element UI的CSS，保持表格样式一致性。使用国内CDN地址可以提高资源加载速度：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">

第三方库增强方案

对于复杂表格或需要分页、页眉页脚等高级功能的场景，推荐使用print-js库。该库提供了更丰富的打印控制选项，支持PDF生成和打印预览。

实现步骤

  1. 安装print-js：通过npm安装print-js库。
npm install print-js --save
  1. 引入并使用print-js：在组件中引入库并配置打印选项。
import printJS from 'print-js';

methods: {
  handleAdvancedPrint() {
    printJS({
      printable: this.$refs.printTable.$el,
      type: 'html',
      header: '员工信息表',
      headerStyle: 'font-size: 18px; text-align: center;',
      style: `
        .el-table { width: 100%; border-collapse: collapse; }
        .el-table th, .el-table td { 
          border: 1px solid #ddd; 
          padding: 8px; 
          text-align: left; 
        }
        .el-table th { background-color: #f5f5f5; }
      `,
      targetStyles: ['*']
    });
  }
}

打印样式优化

关键CSS技巧

为确保打印效果与屏幕显示一致，需要针对打印介质编写专用样式：

/* 打印样式 */
@media print {
  /* 隐藏非打印区域 */
  .no-print { display: none !important; }
  
  /* 表格自适应打印宽度 */
  .el-table { width: 100% !important; }
  
  /* 移除滚动条 */
  .el-table__body-wrapper { overflow: visible !important; }
  
  /* 确保表格边框打印正常 */
  .el-table__row { page-break-inside: avoid; }
  
  /* 分页控制 */
  @page {
    size: A4;
    margin: 1cm;
  }
}

常见问题解决方案

  1. 表格内容溢出：通过设置table-layout: fixed强制列宽适应：
.el-table__header, .el-table__body {
  table-layout: fixed;
}
  1. 重复表头：利用CSS使表头在每一页都显示：
.el-table__header {
  display: table-header-group;
}
  1. 背景色不打印：在打印设置中勾选"背景图形"选项，或使用-webkit-print-color-adjust属性：
.el-table th {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

完整示例代码

以下是一个包含打印功能的完整Element UI表格组件示例：

<template>
  <div class="table-print-demo">
    <div class="toolbar no-print">
      <el-button type="primary" @click="handlePrint">原生打印</el-button>
      <el-button type="success" @click="handleAdvancedPrint">高级打印</el-button>
    </div>
    <el-table
      ref="printTable"
      :data="tableData"
      border
      class="print-table"
      style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import printJS from 'print-js';

export default {
  data() {
    return {
      tableData: [{
        date: '2023-01-01',
        name: '张三',
        address: '北京市海淀区中关村大街1号',
        status: 'active'
      }, {
        date: '2023-01-02',
        name: '李四',
        address: '上海市浦东新区张江高科技园区',
        status: 'active'
      }, {
        date: '2023-01-03',
        name: '王五',
        address: '广州市天河区珠江新城',
        status: 'inactive'
      }]
    };
  },
  methods: {
    handlePrint() {
      const printWindow = window.open('', '_blank');
      printWindow.document.write(`
        <html>
          <head>
            <title>表格打印</title>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">
            <style>
              @media print {
                .el-table { width: 100% !important; }
                .el-table__body-wrapper { overflow: visible !important; }
                .el-table__row { page-break-inside: avoid; }
                @page { size: A4; margin: 1cm; }
              }
            </style>
          </head>
          <body>
            ${this.$refs.printTable.$el.outerHTML}
          </body>
        </html>
      `);
      printWindow.document.close();
      printWindow.onload = () => {
        printWindow.print();
        printWindow.close();
      };
    },
    handleAdvancedPrint() {
      printJS({
        printable: this.$refs.printTable.$el,
        type: 'html',
        header: '员工信息表',
        headerStyle: 'font-size: 18px; text-align: center; margin-bottom: 10px;',
        style: `
          .el-table { width: 100%; border-collapse: collapse; }
          .el-table th, .el-table td { 
            border: 1px solid #ddd; 
            padding: 8px; 
            text-align: left; 
          }
          .el-table th { 
            background-color: #f5f5f5;
            -webkit-print-color-adjust: exact;
          }
        `,
        targetStyles: ['*']
      });
    }
  }
};
</script>

<style scoped>
.toolbar {
  margin-bottom: 16px;
}
</style>

项目资源参考

通过本文介绍的方法，开发者可以为Element UI表格添加专业的打印功能，满足各种办公和数据展示需求。两种方案各有优势，原生API方案适合简单场景，第三方库方案则提供更丰富的功能。结合CSS打印样式优化，可以确保表格在打印介质上呈现最佳效果。建议根据实际项目需求选择合适的实现方式，并参考Element UI官方文档和示例代码进行扩展开发。

element
A Vue.js 2.0 UI Toolkit for Web
项目地址：https://gitcode.com/gh_mirrors/eleme/element
登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
27
11
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
525
3.72 K
pytorchpytorch
Ascend Extension for PyTorch
Python
332
395
flutter_flutterflutter_flutter
暂无简介
Dart
766
189
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
878
586
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
336
165
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
JavaScript
302
352
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
1
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.33 K
748
agent-studioagent-studio
openJiuwen agent-studio提供零码、低码可视化开发和工作流编排，模型、知识库、插件等各资源管理能力
TSX
985
246