vue打印el-table表格

### Vue 中实现打印 `el-table` 表格 为了实现在 Vue 项目中打印 `el-table` 表格的功能，可以采用多种方式来满足需求。一种常见的方式是通过 JavaScript 的原生打印功能结合 CSS 来控制页面布局和样式。 #### 使用纯前端解决方案 可以通过创建一个隐藏的 iframe 或者 div 容器用于承载要打印的内容，并设置特定于打印样式的 CSS 文件[^1]： ```html <template> <div id="app"> <!-- 显示表格 --> <el-button @click="printTable">Print</el-button> <el-table ref="tableToPrint" :data="tableData" style="width: 100%"> <el-table-column prop="date" label="Date"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> <!-- 隐藏容器用于打印 --> <div id="printContainer" v-show="false"></div> </div> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-03", name: "Tom", address: "No. 189, Grove St, Los Angeles" }, { date: "2016-05-02", name: "John", address: "New York No. 1 Lake Park" } ] }; }, methods: { printTable() { const printContent = this.$refs.tableToPrint.outerHTML; document.getElementById('printContainer').innerHTML = `<style>@media print{body *{visibility:hidden;}#printContainer,#printContainer *{visibility:visible;}}@page {size:A4;margin:0mm;} .el-table__header-wrapper th,.el-table__footer-wrapper td{text-align:center;font-weight:bold}</style>${printContent}`; window.print(); } } }; </script> ``` 此代码片段展示了如何捕获 `el-table` 组件并将其 HTML 结构复制到一个新的 DOM 节点中以便专门处理打印逻辑。同时定义了一些简单的 CSS 样式以适应 A4 页面大小以及调整表头居中的显示效果。 另外还可以考虑使用第三方库如 html-to-image 或 jsPDF 将表格转换成图片或 PDF 文档再进行下载保存操作，这取决于具体的应用场景和个人偏好。