先说需求:点击打印调出弹出框->弹出框内展示打印内容->点击打印调出浏览器打印->浏览器打印预览为弹出框内容
一、先说最终成品
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只是一个标签,如果它的子标签和该属性均具有继承性,才会继承这里所设置的属性
单纯记录 !!!