vue中使用window.print()实现局部打印功能

前一段时间需要使用vue实现一个页面的打印功能

vue-print-nb是很好用但是由于他不兼容IE浏览器，而我恰好要用到IE所以就放弃了他

window.print()这个方法是打印当前页面的所有信息，那么我只需要打印一部分信息时就需要就行一个简单的修改。

我们可以逆向思维思考一下，我想打印页面的局部信息，我只需要把不需要打印的信息隐藏起来就好了。

这时候我们就可以使用css的@media 查询功能。

css @media的详细用法

我们可以使用这段代码来选择在打印的时候隐藏部分内容

 @media print{
    .noNeedPrint
    {
    display:none !important;
    }
  } 

noNeedPrint这个class的元素还是可以显示在页面当中的，但是打印的时候就不会出现在预览中，这样一来我们就可以使用window.print()实现页面的局部打印功能啦！

下面我举个例子说明一下具体实现：

<template>
  <div>
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-container>
        <el-header
          class="noNeedPrint"
          style="text-align: right; font-size: 12px"
        >
          <span>404你是不是找不到了</span>
        </el-header>
        <el-main>
          <el-table :data="tableData">
            <el-table-column
              prop="date"
              label="日期"
              width="140"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
            >
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
    <div
      class="noNeedPrint"
      style="margin:10px 0 0 10px"
    >
      <el-button
        type="primary"
        @click="print()"
      >打印页面</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    const item = {
      date: '2020-02-02',
      name: '404',
      address: '辽宁省大连市'
    };
    return {
      tableData: Array(6).fill(item)
    }
  },
  methods: {
    print () {
      window.print()
    }
  },
};
</script>
<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
     @media print{
    .noNeedPrint
    {
    display:none !important;
    }
  }
   @page {
    /* 打印A4大小 */
    size: auto A4 landscape;
    margin: 3mm;
  }
</style>

当我点击打印按钮的时候就只打印我的表格中的信息。

实现效果如下图：

• 记录生活的404