列印頁面時洗掉行內樣式-有解無憂

我有 2 種不同的展示和列印設計模型，它們都在一起。我希望在用戶列印頁面時洗掉我的線條樣式。

我的顯示模式代碼如下：

body {
  background-color: #fff;
  font-family: 'iransansx' !important;
}

hr {
  margin: 0px;
  border-top: 1px dashed #707070;
}

#print {
  width: 4% !important;
  position: fixed;
  left: 38%;
  top: 4%;
  padding: 0px !important;
  min-height: 5%;
}

.Green {
  color: #2A9B52 !important;
}

.Red {
  color: #E50000 !important;
}

.Master {
  width: 100%;
  height: auto;
  padding: 2px 10px;
  font-size: 2vw;
  margin: auto;
  direction: rtl;
  font-weight: 800;
  text-align: right;
  align-items: center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  font-family: 'iransansx' !important;
}

.MS_C {
  width: 100%;
  align-items: center;
  text-align: center;
  margin: 1% auto;
  color: #5C5C5C;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

.img {
  width: 30%;
  height: auto;
  display: flex;
  margin: auto;
  align-items: center !important;
}

.Pic {
  width: 10%;
}

.TMDetail {
  width: 100%;
  height: 100%;
  direction: rtl;
  font-weight: 600;
  border-collapse: collapse;
  text-align: right;
  font-family: 'iransansx' !important;
}

.td {
  width: 100%;
  padding: 1% 5%;
  text-align: right;
  font-family: 'iransansx' !important;
}

@media print {

  .Show {
    display: none !important;
  }

  .ShowPrin {
    display: flex !important;
  }

  .Pic {
    width: 15%;
  }

}

<div class="Master">
  <div class="MS_C Show">
    <img class="Pic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Yahoo!_(2019).svg/2560px-Yahoo!_(2019).svg.png">
  </div>
  <div class="MS_C ShowPrint" style="display:none;">
    <img class="Pic" src="https://cdn.iconscout.com/icon/free/png-256/google-2296064-1912023.png">
  </div>
  <div class="MS_C">
    <span class="MS_C fldColor Show">fldStatusName</span>
  </div>
  <div class="MS_C Show"> fldDate &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fldTime</div>
  <div class="MS_C">
    <table class="TMDetail">
      <tr class="tr">
        <td class="td ShowPrint" style="display:none;">
          <img class="Pic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Yahoo!_(2019).svg/2560px-Yahoo!_(2019).svg.png"> &nbsp;
          fldStatusName
        </td>
      </tr>
      <tr class="tr ShowPrint" style="display:none;">
        <td class="td">fldDate &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fldTime </td>
      </tr>
      <tr class="tr ShowPrint" style="display:none;">
        <td class="td">
          <hr>
        </td>
      </tr>
      <tr class="tr">
        <td class="td"> fldSourceID </td>
      </tr>
      <tr class="tr">
        <td class="td">fldDestinationType fldDestination </td>
      </tr>
      <tr class="tr">
        <td class="td">fldBankName </td>
      </tr>
      <tr class="tr">
        <td class="td">fldName fldDestinationName </td>
      </tr>
      <tr class="tr">
        <td class="td">
          <hr>
        </td>
      </tr>
      <tr class="tr">
        <td class="td"><span class="fldColor"> fldPrice </span></td>
      </tr>
      <tr class="tr">
        <td class="td">
          <hr>
        </td>
      </tr>
      <tr class="tr">
        <td class="td">fldKarmozdName : fldKarmozd </td>
      </tr>
      <tr class="tr">
        <td class="td">fldID </td>
      </tr>
      <tr class="tr">
        <td class="td">fldID2 </td>
      </tr>
      <tr class="tr">
        <td class="td">fldDescription </td>
      </tr>
      <tr class="tr Show">
        <td class="td">
          <img class="img" src="https://cdn.iconscout.com/icon/free/png-256/google-2296064-1912023.png">
        </td>
      </tr>
    </table>
  </div>
</div>

當用戶列印時，我的首選輸出如下：

body {
  background-color: #fff;
  font-family: 'iransansx' !important;
}

hr {
  margin: 0px;
  border-top: 1px dashed #707070;
}

#print {
  width: 4% !important;
  position: fixed;
  left: 38%;
  top: 4%;
  padding: 0px !important;
  min-height: 5%;
}

.Green {
  color: #2A9B52 !important;
}

.Red {
  color: #E50000 !important;
}

.Master {
  width: 100%;
  height: auto;
  padding: 2px 10px;
  font-size: 2vw;
  margin: auto;
  direction: rtl;
  font-weight: 800;
  text-align: right;
  align-items: center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  font-family: 'iransansx' !important;
}

.MS_C {
  width: 100%;
  align-items: center;
  text-align: center;
  margin: 1% auto;
  color: #5C5C5C;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

  .Show {
    display: none !important;
  }

  .ShowPrin {
    display: flex !important;
  }

.img {
  width: 30%;
  height: auto;
  display: flex;
  margin: auto;
  align-items: center !important;
}

.Pic {
  width: 10%;
}

.TMDetail {
  width: 100%;
  height: 100%;
  direction: rtl;
  font-weight: 600;
  border-collapse: collapse;
  text-align: right;
  font-family: 'iransansx' !important;
}

.td {
  width: 100%;
  padding: 1% 5%;
  text-align: right;
  font-family: 'iransansx' !important;
}

<div class="Master">
  <div class="MS_C Show">
    <img class="Pic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Yahoo!_(2019).svg/2560px-Yahoo!_(2019).svg.png">
  </div>
  <div class="MS_C ShowPrint">
    <img class="Pic" src="https://cdn.iconscout.com/icon/free/png-256/google-2296064-1912023.png">
  </div>
  <div class="MS_C">
    <span class="MS_C fldColor Show">fldStatusName</span>
  </div>
  <div class="MS_C Show"> fldDate &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fldTime</div>
  <div class="MS_C">
    <table class="TMDetail">
      <tr class="tr">
        <td class="td ShowPrint">
          <img class="Pic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Yahoo!_(2019).svg/2560px-Yahoo!_(2019).svg.png"> &nbsp;
          fldStatusName
        </td>
      </tr>
      <tr class="tr ShowPrint">
        <td class="td">fldDate &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fldTime </td>
      </tr>
      <tr class="tr ShowPrint">
        <td class="td">
          <hr>
        </td>
      </tr>
      <tr class="tr">
        <td class="td">fldSourceID </td>
      </tr>
      <tr class="tr">
        <td class="td">fldDestinationType fldDestination </td>
      </tr>
      <tr class="tr">
        <td class="td">fldBankName </td>
      </tr>
      <tr class="tr">
        <td class="td">fldName fldDestinationName </td>
      </tr>
      <tr class="tr">
        <td class="td">
          <hr>
        </td>
      </tr>
      <tr class="tr">
        <td class="td"><span class="fldColor"> fldPrice </span></td>
      </tr>
      <tr class="tr">
        <td class="td">
          <hr>
        </td>
      </tr>
      <tr class="tr">
        <td class="td">fldKarmozdName : fldKarmozd </td>
      </tr>
      <tr class="tr">
        <td class="td"> fldID </td>
      </tr>
      <tr class="tr">
        <td class="td">fldID </td>
      </tr>
      <tr class="tr">
        <td class="td">fldDescription </td>
      </tr>
      <tr class="tr Show">
        <td class="td">
          <img class="img" src="https://cdn.iconscout.com/icon/free/png-256/google-2296064-1912023.png">
        </td>
      </tr>
    </table>
  </div>
</div>

我使用了@media print，但尚未在輸出中收到回應

我使用了@media print，但尚未在輸出中收到回應所以我使用了以下 jquery 代碼，但它在我的代碼中都不起作用。

$('.ShowPrint').css('display', 'flex !important');
$(".ShowPrint").removeInlineCss("");
$(".ShowPrint").attr("style", "");
$('.ShowPrint').removeStyle('display');
$('.ShowPrint').style.removeAttribute();
document.getElementsByClassName('ShowPrint').removeInlineCss('display');
$("div:inlineStyle(display:none)").hide();
$("tr:inlineStyle(display:none)").hide();

請幫助我，我的錯誤在哪里？？？

要查看 jsfiddle 中的代碼：我的代碼

uj5u.com熱心網友回復：

在要在列印中顯示的 html 中添加不可列印的類。然后在下面添加javascript。基本上，下面的 javascript 將隱藏在列印程序中具有不可列印類的 html。

(function () {
        var beforePrint = function () {
            $(".notprintable").hide();
            console.log('Functionality to run before printing.');

        };
        var afterPrint = function () {
            $(".notprintable").show();
            console.log('Functionality to run after printing');
        };

        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');
            mediaQueryList.addListener(function (mql) {
                if (mql.matches) {
                    beforePrint();
                } else {
                    afterPrint();
                }
            });
        }

        window.onbeforeprint = beforePrint;
        window.onafterprint = afterPrint;
    }());

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/490402.html

標籤：javascript html jQuery css

上一篇：Linux-安裝ifconfig

下一篇：如何將轉換應用于相同的元素但處于不同的狀態：懸停