1.定义打印样式，全局引用
@media print {
body {
height: auto !important;
}
.noprint {
display: none;
}
.need-print {
display: block !important;
color: #000;
}
#app {
.app-wrapper {
.main-container {
margin: 0;
}
.sidebar-container {
display: none;
}
.navbar {
display: none;
}
.tags-view {
display: none;
}
.line {
display: none;
}
.app-main {
height: auto !important;
}
.sys-foot {
display: none;
}
}
}
}
2.打印内容,区分区域
<div>
<div class="noprint">
xxxx
</div>
<printContent :data="logoUrl"></printContent>
</div>
<template>
<html>
<div class="need-print">
<div class="image">
<img class="img" :src="imgUrl"/>
</div>
</div>
</html>
</template>
<script>
export default {
props: {
imgUrl: {
type: String,
default: ''
}
},
mounted() {
// this.print()
},
data() {
return {
infoData: {}
}
}
}
</script>
<style lang="scss" scoped>
.need-print {
z-index: 9999;
position: absolute;
width: 100%;
height: 100%; //modal去除
display: none;
font-size: 14px;
font-family: '宋体';
background: #fff;
.title {
padding-top: 18px;
padding-bottom: 20px;
text-align: center;
font-size: 32px;
font-weight: bold;
}
.arial {
text-shadow: 0.1pt 0px 0px black;
color: #000 !important;
}
padding:0px 10px;
}
.image{
img{
max-width: 100%;
}
}
</style>
3.监听打印完成回调
mounted() {
window.addEventListener('afterprint', this.handleCompletePrint)
},
beforeDestroy() {
window.removeEventListener('afterprint', this.handleCompletePrint)
}handleCompletePrint（）{ xxxx }---具体执行事件
扫一扫
3154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
