I am currently using the Vue framework to work on printing webpages for my application. I have an issue that needs a solution, which I will explain below.
<template>
<div id = "intro" style = "text-align:center;">
<div
v-for="report in reports"
:key="report.property"
:class="['Section1', { 'non-print-css' : noprint }]">
<div class="Icon" id="printReport_AId" v-if="isOverview">
<font-awesome-icon :icon="report.icon" @click="printWindow()"/>
</div>
</div>
<div class="logo"> this text should be none when printing . if the section1 is none in screen. </div>
</div>
</template>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
timestamp: ''
},
created() {
},
methods: {
printWindow() {
const curURL = document.location.href;
history.replaceState(history.state, '', '/');
const originalTitle = document.title;
document.title = '. ';
window.print();
document.title = originalTitle;
history.replaceState(history.state, '', curURL);
},
computed: {
noprint() {
const printicon = document.getElementById('printReport_AId');
if (printicon.style.display === 'none') {
return true;
}
return false;
},
}
}
});
</script>
<style>
.non-print-css {
// i have to set the display none for logo when its printed.
}
</style>
There are two div classes:
- section1
- logo.
The condition is as follows:
If section1 is displayed as none, then the logo should not be printed when the page is printed.
I have added a condition in the computed property to check if the section's display is none. If it is true, it should execute the CSS where we set @print to make the logo display as none.
I need a proper solution either in CSS or JS.