在vue2.x+element项目中打印页面时发现表格数据被重复打印了。
点击打印：发现多循环展示且打印了两条数据 造成原因：element提供的fixed固定效果是通过新创建一个相同dom进行切换实现的，观察dom结构可以发现有多个相同的dom结构。 解决办法： 1：不使用fixed，把table中的fixed属性删除。 2：在打印事件中判断打印内容的结构中是否有fixed的表格，有的话删除即可。
最后贴上修改前和修改后的代码：
修改前：
<template> <div> <el-table :data="tableData" style="width: 400px" max-height="250"> <el-table-column fixed prop="date" label="日期" width="150"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column fixed="right" label="操作" width="120"> <template slot-scope="scope"> <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 移除 </el-button> </template> </el-table-column> </el-table> <div style="display: none;" id="print_iframe"> <span>这是自定义内容的标题</span> <el-table :data="tableData" style="width: 100%" max-height="250"> <el-table-column fixed prop="date" label="日期" width="150"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column fixed="right" label="操作" width="120"> <template slot-scope="scope"> <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 移除 </el-button> </template> </el-table-column> </el-table> </div> <el-button @click="print()">打印</el-button> </div> </template> <script> export default { methods: { print() { var iframe = document.createElement('iframe'); document.body.appendChild(iframe) var doc = iframe.contentWindow.document; let wrap = document.getElementById("print_iframe").innerHTML; doc.write("<div>" + wrap + "</div>"); doc.close(); iframe.contentWindow.focus(); iframe.contentWindow.print(); //最后把这个iframe销毁 iframe.parentNode.removeChild(iframe); }, deleteRow(index, rows) { rows.splice(index, 1); } }, data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333 }] } } } </script>修改后的print方法：
methods: { print() { var iframe = document.createElement('iframe'); document.body.appendChild(iframe) var doc = iframe.contentWindow.document; let wrap_dom=document.getElementById("print_iframe"); let fixed = wrap_dom.querySelector('.el-table__fixed'); let fixed_right = wrap_dom.querySelector('.el-table__fixed-right'); //判断dom结构中是否有el-table__fixed及el-table__fixed-right节点并删除 if(fixed){ wrap_dom.querySelector('#my_table').removeChild(fixed) } if(fixed_right){ wrap_dom.querySelector('#my_table').removeChild(fixed_right) } let wrap = wrap_dom.innerHTML; doc.write("<div>" + wrap + "</div>"); doc.close(); iframe.contentWindow.focus(); iframe.contentWindow.print(); //打印完成后我们将iframe销毁了，所以下面两行代码无需加上。 //wrap_dom.querySelector('#my_table').appendChild(fixed); //wrap_dom.querySelector('#my_table').appendChild(fixed_right) //最后把这个iframe销毁 iframe.parentNode.removeChild(iframe); }, deleteRow(index, rows) { rows.splice(index, 1); } },效果如下
