当前位置：首页 > 前端教程

elementui打印

2026-03-05 18:43:49前端教程

打印整个页面

使用浏览器自带的打印功能（window.print()）可以打印整个页面。在Element UI项目中，直接调用该方法会打印当前渲染的DOM内容，包括导航栏、侧边栏等。

// 触发浏览器打印
const handlePrint = () => {
  window.print();
};

注意事项：

打印时会包含页面上所有可见元素，需通过CSS隐藏非目标内容。
建议在打印前动态修改DOM或通过CSS媒体查询隐藏无关部分。

打印特定DOM元素

若需仅打印部分内容（如表单、表格），可通过以下步骤实现：

提取目标HTML：
使用document.getElementById或ref获取DOM节点内容。
创建打印窗口：
在新窗口中写入目标HTML，并调用打印功能。

const printElement = (elementId) => {
  const printContent = document.getElementById(elementId).innerHTML;
  const originalContent = document.body.innerHTML;
  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalContent; // 恢复原页面
};

优化方案：

使用iframe替代直接修改body.innerHTML，避免页面闪烁。
通过CSS注入确保打印样式（如隐藏按钮、调整边距）：
```
@media print {
  .no-print { display: none; }
  body { margin: 0; }
}
```

打印Element UI表格

针对el-table，需处理分页数据以确保打印完整内容：

临时修改分页：
若表格有分页，打印前需将所有数据渲染到同一页。

const printTable = (tableRef) => {
  const table = tableRef.value;
  const originalPageSize = table.pageSize;
  table.pageSize = table.total; // 临时显示全部数据
  await table.doLayout(); // 确保表格重新渲染
  window.print();
  table.pageSize = originalPageSize; // 恢复分页
};

处理表格样式：
通过CSS强制显示表格边框和背景（打印时可能丢失）：

@media print {
  .el-table td, .el-table th {
    border: 1px solid #000 !important;
    background-color: #fff !important;
  }
}

使用第三方库（vue-print-nb）

对于复杂需求，推荐使用专用库如vue-print-nb：

elementui打印

安装依赖：
```
npm install vue-print-nb --save
```

注册指令：

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

绑定打印区域：

<template>
  <div id="print-area">
    <!-- 需要打印的内容 -->
    <el-table data="tableData"></el-table>
  </div>
  <el-button v-print="'#print-area'">打印</el-button>
</template>

优势：