如何使用 css 或 js 根据 vue.js 中的条件在打印页面中设置不显示？

Posted 2023-02-22

【中文标题】如何使用 css 或 js 根据 vue.js 中的条件在打印页面中设置不显示？

【英文标题】：how to Set display none in print pages based on condition in vue.js using css or js?

【发布时间】：2019-12-10 20:53:23

【问题描述】：

我在 vue 框架中工作，我目前正在为我的应用程序打印网页。我需要一种情况的解决方案。我已经在下面解决了。

<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>

我有两个 div 类

第 1 节 徽标。

条件：

如果第 1 部分显示无，那么当我打印页面时，徽标 不应打印。

我在计算中添加了条件以检查部分显示是否 none 如果它是真的它应该执行我们设置@print 的css。 标志显示是没有的。

我需要一个合适的css或js解决方案

【参考方案1】：

您可以使用media queries 应用特定于打印的样式，特别是

@media print 
    .non-print-css 
        display: none;
    

【讨论】：

这应该只在条件通过时执行，否则这将通用到整个网页。我需要在打印页面中删除徽标，但这将删除报告图标。

当你满足你需要的条件时，你可以让这个类只应用在你想要的元素上。

【参考方案2】：

"If section 1 has display none" ... 表示该元素已渲染但未显示，您必须为您的section1 提供v-show 指令而不是v-if ... 当设置为@987654324 @ (v-show) 你的元素会有display : none。 “那么当我打印页面时，不应该打印徽标”......所以如果 section1 v-show 设置为 false 我们不会正确打印......在这种情况下，我们应该在我们的数据中创建一个变量并将其绑定到section1（v-show），所以当该变量为false时，该元素具有display : none，所以我们不打印......让我们调用该变量@987654334 @ ...现在我们的方法只有当isSection1 是true 然后我们打印...这里应该是怎样的：

data: 
    isSection1: false, // false means section1 has display : none
    timestamp: ''
  ,
  methods: 
    printWindow() 
     // only if section1 doesn't have display : none
      if (this.isSection1) 
        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);
      
    
  

<div class="section1" v-show="isSection1"> </div>

【讨论】：

不，这不是我想要的，如果我右键单击并给出打印选项，那么它不应该打印

【参考方案3】：

我通过这里寻找一种有条件地渲染组件但在未渲染时保留空间的方法。 从这里经过后，我发现了这个很棒的出版物，它解释了 VueJS 中可用的 3 个选项。

所以，你是enter link description here

【参考方案4】：

我已经修复了它。部分但元素 id 是 null ，事件没有被监听

将 v-bind 添加到 logo 类。

如下添加mounted()和computed()。

mounted() 
    window.addEventListener('print', this.noprint);
    ,

computed()
    noprint() 
        const printicon = document.getElementById('printReport_AId');
        if (printicon != 'null') 
          return true;
        
        return false;
    ,
  ,