前端打印页面功能element数据重复打印

在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);
      }
    },

效果如下