Vue 浏览器的局部打印

先说需求：点击打印调出弹出框->弹出框内展示打印内容->点击打印调出浏览器打印->浏览器打印预览为弹出框内容

一、先说最终成品

1.首页内容

2.点击打印弹出打印内容

3.点击打印调出浏览器打印打印弹出框内容

二、过程

核心思路是控制浏览器打印内容盖住body的内容 废话少说 上代码辣

1.首页代码

<template>
  <div>
    <div>这是body的内容</div>
    <el-button @click="isVisible = true">打 印</el-button>
    <print-dialog :visible="isVisible" @handleClose="close"></print-dialog>
  </div>
</template>

<script>
import printDialog from "@/components/demo/printDialog.vue";
export default {
  components: {
    printDialog,
  },
  data() {
    return {
      isVisible: false,
    };
  },
  methods: {
    close(val) {
      this.isVisible = val;
    },
  },
};
</script>

<style scoped></style>

 就是简单的调出弹框组件没啥可说的

2.弹出框组件

<template>
  <el-dialog
    title="局部打印"
    :visible.sync="visible"
    :before-close="handleClose"
    width="30%"
  >
    <div class="print">
      <span class="content">这是我们希望打印的内容</span>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="print">打 印</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    print() {
      window.print();
    },
    handleClose() {
      this.$emit("handleClose", false);
    },
  },
};
</script>

<style scoped lang="less">
.print {
  background-color: #fff;
  height: 100%; // 盖住body
}
@media print {
  body * {
    visibility: hidden;
  }
  .print,
  .print * {
    visibility: visible;
  }
  .print {
    position: fixed; // 把内容定住
    left: 0;
    top: 0;
  }
}
</style>

三、知识点补充

@media print -> 控制打印

* 相当于选择器，代表html所有的元素，包括html标签、body标签

body只是一个标签，如果它的子标签和该属性均具有继承性，才会继承这里所设置的属性

单纯记录 ！！！