Element UI表格打印：Table打印功能实现-优快云博客

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

【免费下载链接】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控制打印区域样式，隐藏非必要元素，确保表格在打印介质上正确显示。

实现步骤

添加打印按钮：在表格工具栏中添加打印触发按钮，绑定点击事件。

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

编写打印处理函数：在点击事件中调用打印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();
    };
  }
}

引入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生成和打印预览。

实现步骤

安装print-js：通过npm安装print-js库。

npm install print-js --save

引入并使用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;
  }
}

常见问题解决方案

表格内容溢出：通过设置table-layout: fixed强制列宽适应：

.el-table__header, .el-table__body {
  table-layout: fixed;
}

重复表头：利用CSS使表头在每一页都显示：

.el-table__header {
  display: table-header-group;
}

背景色不打印：在打印设置中勾选"背景图形"选项，或使用-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官方文档：examples/docs/zh-CN/table.md
Table组件源码：packages/table/
打印样式示例：examples/demo-styles/table.scss
项目主页：README.md

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

【免费下载链接】element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考