Element UI表格数据打印：Table打印输出方案-优快云博客

Element UI表格数据打印：Table打印输出方案

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

在后台管理系统开发中，经常需要将Element UI的Table组件数据导出为纸质文档或PDF。本文将介绍三种实用的Table打印方案，从基础实现到高级自定义，帮助开发者快速解决数据打印需求。

方案对比与选择建议

方案	实现难度	兼容性	自定义程度	适用场景
浏览器原生打印	⭐	✅ 所有浏览器	⭐⭐	简单表格、快速实现
vue-print-nb插件	⭐⭐	✅ 主流浏览器	⭐⭐⭐	中等复杂度打印需求
html2canvas + jspdf	⭐⭐⭐	⚠️ 需处理兼容性	⭐⭐⭐⭐	复杂布局、PDF导出

核心思路流程图

mermaid

基础方案：浏览器原生打印实现

实现步骤

添加打印按钮

在Table组件旁添加打印触发按钮：

<template>
  <div>
    <el-button type="primary" @click="handlePrint">打印表格</el-button>
    <el-table id="printTable" :data="tableData">
      <!-- 表格列定义 -->
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

编写打印方法

methods: {
  handlePrint() {
    // 获取表格DOM元素
    const printContent = document.getElementById('printTable').outerHTML
    // 创建打印窗口
    const newWindow = window.open('', '_blank')
    // 写入基础HTML结构
    newWindow.document.write(`
      <html>
        <head>
          <title>表格打印</title>
          <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css">
          <style>
            @media print {
              body { margin: 2cm; }
              .el-table { width: 100% !important; }
              .no-print { display: none; }
            }
          </style>
        </head>
        <body>
          ${printContent}
          <script>window.print(); window.close();</script>
        </body>
      </html>
    `)
    newWindow.document.close()
  }
}

关键样式设置

创建examples/demo-styles/table.scss文件，添加打印专用样式：

/* 打印样式优化 */
@media print {
  .el-table {
    border-collapse: collapse !important;
  }
  .el-table__header-wrapper, .el-table__body-wrapper {
    overflow: visible !important;
  }
  .el-table th, .el-table td {
    border: 1px solid #ddd !important;
    padding: 8px !important;
  }
  /* 隐藏非打印区域 */
  .el-pagination, .no-print {
    display: none !important;
  }
}

进阶方案：使用vue-print-nb插件

安装与配置

安装插件

npm install vue-print-nb --save

全局注册

在src/index.js中添加：

import Print from 'vue-print-nb'
Vue.use(Print)

组件中使用

<template>
  <div>
    <div id="printArea">
      <el-table :data="tableData">
        <!-- 表格列定义 -->
      </el-table>
    </div>
    <el-button 
      v-print="printConfig" 
      type="primary"
    >
      高级打印
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      printConfig: {
        id: 'printArea',
        popTitle: '表格打印',
        extraCss: 'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css',
        extraHead: '<meta charset="UTF-8">'
      }
    }
  }
}
</script>

分页处理技巧

当表格数据超过一页时，需要在examples/demo-styles/table.scss中添加分页控制：

/* 分页控制样式 */
@media print {
  .page-break {
    page-break-after: always;
    page-break-inside: avoid;
  }
  /* 表头每页重复 */
  .el-table__header {
    display: table-header-group !important;
  }
}

高级方案：HTML转Canvas再转PDF

安装依赖

npm install html2canvas jspdf --save

实现代码

<template>
  <div>
    <el-button @click="exportPdf">导出PDF</el-button>
    <el-table ref="printTable" :data="tableData">
      <!-- 表格列定义 -->
    </el-table>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export default {
  methods: {
    async exportPdf() {
      const table = this.$refs.printTable.$el
      // 克隆表格避免影响原页面
      const cloneTable = table.cloneNode(true)
      document.body.appendChild(cloneTable)
      
      // 调整克隆表格样式
      cloneTable.style.width = table.offsetWidth + 'px'
      cloneTable.style.margin = '0 auto'
      
      // 生成Canvas
      const canvas = await html2canvas(cloneTable, {
        scale: 2,
        useCORS: true,
        allowTaint: true
      })
      
      // 移除克隆元素
      document.body.removeChild(cloneTable)
      
      // 转换为PDF
      const pdf = new jsPDF('l', 'mm', 'a4')
      const imgData = canvas.toDataURL('image/jpeg', 0.9)
      const imgWidth = 280
      const imgHeight = canvas.height * imgWidth / canvas.width
      
      pdf.addImage(imgData, 'JPEG', 10, 10, imgWidth, imgHeight)
      pdf.save('表格数据.pdf')
    }
  }
}
</script>

多页处理实现

// 处理多页PDF的核心代码
const pageHeight = 297 // A4高度(mm)
let position = 10 // 初始位置
const imgHeight = canvas.height * imgWidth / canvas.width

// 判断是否需要多页
if (imgHeight > pageHeight - 20) {
  // 计算总页数
  const pageNum = Math.ceil(imgHeight / (pageHeight - 20))
  for (let i = 0; i < pageNum; i++) {
    pdf.addImage(
      imgData, 
      'JPEG', 
      10, 
      position, 
      imgWidth, 
      i === pageNum - 1 ? imgHeight - (pageNum - 1) * (pageHeight - 20) : pageHeight - 20
    )
    if (i < pageNum - 1) pdf.addPage()
    position = 10
  }
} else {
  pdf.addImage(imgData, 'JPEG', 10, 10, imgWidth, imgHeight)
}

常见问题解决方案

样式丢失问题

确保在打印配置中正确引入Element UI的CSS文件，推荐使用国内CDN：

// 正确的CDN链接示例
const cdnCss = 'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css'

表格错位问题

在packages/table/src/table.vue中找到Table组件的样式定义，确保打印时表格宽度正确：

/* 打印时表格宽度修正 */
@media print {
  .el-table {
    width: 100% !important;
    table-layout: fixed !important;
  }
}

性能优化建议

打印前隐藏非必要元素
大数据表格采用分页加载
使用v-if控制只渲染打印区域

总结与扩展

本文介绍的三种打印方案覆盖了从简单到复杂的各种场景。实际开发中，可根据项目需求选择合适方案：

简单打印需求：优先使用浏览器原生打印
中等需求：推荐vue-print-nb插件
复杂布局或PDF导出：采用html2canvas + jspdf方案

更多高级用法可参考：

通过合理选择打印方案和优化配置，可以高效解决Element UI Table组件的数据打印需求，提升用户体验。

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

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